javascript - 使用 CSS 格式化下拉列表

Question

我基本上在 asp.net 页面上使用下拉列表控件，我已将宽度设置为 150px。在 mozilla 浏览器中，它显示展开的列表项，而在 IE 中，列表项文本被限制为下拉列表的宽度。任何想法，我怎样才能在 IE 中获得与在 Mozilla 中相同的下拉列表外观。

我只想将列表项容器扩展到其最大宽度，而不是下拉列表框。

Answer 1

我很确定您不能单独设置下拉菜单的宽度和选项 - 这取决于浏览器。唯一的选择是自己在 javascript 中复制下拉列表的行为。基本上，您将创建一个看起来像下拉列表控件的东西并附加一个单击事件处理程序，该处理程序将显示一个绝对定位的 div（或 ul）来显示选项。然后，您将为每个选项附加一个事件处理程序，该选项将隐藏选项并采取您需要的操作 - 可能在下拉控件的文本中显示选项并存储值（如果这是一个表单，则隐藏的表单字段将在这里有所帮助你想提交）。这是一项相当多的工作，但只要您小心使用 css，它就会具有在所有浏览器中看起来相同的优势。我不

Answer 2

我认为您正在寻找以下解决方案。

https://jsfiddle.net/avernet/2Gn2c/

$("select.ie8-fallback")
    .on('mousedown'   , 'select', expand)
    .on('blur change' , 'select', contract);

尽管我建议仅在使用 IE8 的情况下将此代码与 IE 一起使用。

如果您添加任何代码，我会提供针对您的问题的解决方案，但我认为您可以从中理解。