html - 如何使用 Css 修复此 "Select"下拉菜单

标签 html css select drop-down-menu

<分区>

这个文本“第三天啊!一个选项怎么能包含这么多单词?这真的是很多单词。”使我的选择框宽度超过 300px。

<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/

如何使用该文本使框宽框始终为 300px???

请帮帮我。

谢谢

最佳答案

以下 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 和其他浏览器中有效(我刚刚测试过它并且可以正常工作)

关于html - 如何使用 Css 修复此 "Select"下拉菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16744612/

上一篇:javascript - 使用 CSS3 动画制作幻灯片

下一篇:javascript - 纯javascript : overlay object

相关文章:

python - 将 find_all 漂亮的汤标签组合成一个字符串

php - 我需要有关 MySQL SELECT 查询的帮助

javascript - 在页面加载时选择具有多个选定值的选择框

javascript - Angular 6 - 单击外部菜单

javascript - 使用 Javascript 获取下拉列表的值

javascript - 使用 document.querySelector()

c# - 使用 MVC 4 ASP.NET C# 自定义 jQGrid 颜色

php - 如何加快处理多个大型数组的缓慢加载 PHP 页面?

html - 如何使用图像嵌入按钮将基于图像的导航栏居中?

mysql - sql删除 double 值