Internet Explorer中的下拉列表样式

Question

我对IE呈现DropDownList的方式有一些问题。 在Firefox中它看起来应该是这样，这也是我想在IE中显示的方式。 以下是Firefox中下拉列表的屏幕截图：

IE中的

截图：

我希望下拉列表垂直向上扩展，直到下拉列表的位置，我不希望下拉列表低于现有的下拉列表控件。 有什么技巧如何用css做到这一点？ 在此先感谢Laziale

Answer 1

这就是下拉菜单在Internet Explorer 10及更高版本（以及Windows应用商店应用）中的工作方式：当菜单打开时，所选项目覆盖下拉控件，上面显示的其他项目在它下面。据推测，Microsoft进行了此更改，以便the menu is more touch friendly。

我浏览了the list of CSS properties supported by Internet Explorer，但我没有注意到任何会影响菜单位置的内容。因此，如果此行为不可接受，则需要避开本机操作系统控件，以支持基于HTML / CSS的下拉菜单，例如jQuery Selectmenu或Telerik的RadDropDownList。

Answer 2

下拉列表基本上由浏览器控制。有限的样式有时会起作用，但它是完全不值得信任的跨浏览器。这样做的原因是他们经常使用操作系统的渲染进行下拉。

如果您想要完全控制下拉列表，则必须使用<ul>和<li>从头开始绘制，并将下拉触发器设为{{ 1}}标记并使用javascript切换<a>的可见性并传输所选值。

存在JavaScript插件，它采用现有的下拉列表和做一些类似的事情。我不知道哪一个与您的请求完全匹配，但类似于组合框模式下的JQueryUI自动完成（http://jqueryui.com/autocomplete）可能会为您提供一个良好的样式起点。

Answer 3

参考 - IE10 Select box issue

  

这是Internet Explorer 10中此控件的默认行为。根据列表中的项目数和屏幕大小，其他浏览器也会以不同的方式显示菜单 - 尽管我认为IE10是唯一的浏览器这将在打开下拉列表时平衡select元素上方和下方的项目数。

Answer 4

原因是每个浏览器对选择框都有不同的实现。实现一个漂亮的crossbrowser支持的选择框几乎是不可能的。执行“安全”实现的唯一方法是隐藏选择框并将其替换为自定义选择列表实现。

我强烈建议使用现有的组件。如果您已经使用过jQuery，请查看Select2。

  

Select2是基于jQuery的选择框替代品。它支持搜索，远程数据集和无限滚动结果。

我在页面上使用了几个月，我可以说它非常棒。

Answer 5

此jsfiddle不是最终版本，但如果您在每个浏览器中显示相同的列表，则您将无法选择自己的自定义选择列表。

我的jsfiddle中的示例是我实现选择列表的最简单方法。通过使用<input type="radio" />单选按钮，可以通过css轻松自定义它并获取所选值。

请看一下。

Answer 6

坚持以上答案，这可能有所帮助 -

如果你选择列表中的第一项并再次打开它，列表将向下打开

现在选择底部的选项，然后再次打开下拉列表。该列表将打开其他元素