如何使用 Css 修复此“选择”下拉菜单 [重复]答案

【问题标题】：How To Fix This "Select" Drop Down Using Css [duplicate]如何使用 Css 修复此“选择”下拉菜单 [重复]
【发布时间】：2013-05-24 22:47:27
【问题描述】：

这个文本“第三个 OMG！一个选项怎么能包含这么多字？这真的是很多字。”使我的选择框宽度超过 300 像素。

<form action="" method="get">
<select name="monster-widget-just-testing">
<option value="0">First
</option><option value="1">Second
</option><option value="2">Third OMG! How can one option contain soooo many words? This really is a lot of words.
</option></select>
</form>

在此处查看演示 > http://jsfiddle.net/VHf9r/

如何使用该文本使框宽框始终为 300 像素？？？

请帮帮我。

谢谢

【问题讨论】：

我认为没有办法调整select的“下拉部分”的宽度...
选择是一种风格。我只是不会打扰......
您是否尝试控制select 框的下拉部分的宽度（而不是始终可见的部分）？

标签： html css select drop-down-menu

【解决方案1】：

以下 CSS 适用于除 Google Chrome 之外的所有主要浏览器。我不知道 chrome 的解决方案，但这是可行的：

#myselect { 
width:300px; 
} 
#myselect option { 
width:300px; 
}

只需将myselect id 附加到选择元素，如下所示：

<select id="myselect" name="monster-widget-just-testing">

在此处了解更多信息：Set width of dropdown element in HTML select dropdown options

这是一个 jsFiddle：

http://jsfiddle.net/sVv6x/

致 OP：这在 Google Chrome 中无法使用，但在 Firefox 和其他浏览器中可以使用（我刚刚对其进行了测试，它可以正常工作）

【讨论】：

这里可能没有必要包含option。
@v123shine 查看我的编辑 - Chrome 有问题

【解决方案2】：

或者这个： .widget_text 选择 { 最小宽度：300px； }

【讨论】：

这设置了最小宽度，我想你的意思是max-width
不，我的意思是最小宽度 Karl。如果你看 J.S. Fiddle 选项列表太窄，所以 min-width 不允许小于 300 像素。最大宽度根本没有帮助。