使用 CSS 格式化下拉列表答案

【问题标题】：Dropdownlist formatting using CSS使用 CSS 格式化下拉列表
【发布时间】：2013-05-10 23:19:32
【问题描述】：

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

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

【问题讨论】：

我可能会考虑设置max-width而不是width？

标签： javascript jquery asp.net css

【解决方案1】：

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

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

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

虽然我建议仅在使用 IE8 if 条件的 IE 中使用此代码。

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

【讨论】：

【解决方案2】：

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

【讨论】：

非常感谢您的回复，但在看到下拉列表中的大文本后，我想做的是用户建议的修复。如果我尝试用其他控件替换此下拉列表，则可能还需要对后面的代码进行许多更改。难道不能使用 javascript 或 CSS 来解决这个问题吗？
抱歉，我认为浏览器不允许您进行您想要的更改。您应该能够通过使用 javascript 在旧控件存在时生成新控件来封装此更改。一旦选择了选项，它就可以保留（但隐藏）旧控件并更新其值。这样，更改不应影响任何其他代码。