选择和选项标签下拉菜单的不同宽度答案

【问题标题】：Different width for select and option tag Dropdown选择和选项标签下拉菜单的不同宽度
【发布时间】：2013-06-06 18:26:58
【问题描述】：

我有一个下拉菜单，选择和选项标签的宽度不同：-

#select{
width:150px;
>option{
width:210px;
}
}

此代码在除 IE7 和 IE8 之外的所有其他浏览器中运行良好。在这些浏览器中，选项标签也使用宽度为 150 像素。如何解决这个问题？请帮忙....

【问题讨论】：

你能给我们你的下拉菜单的html代码吗？或者如果可能的话 jsfiddle？
这不是您在此处提供的真正有效的 CSS 代码。无论如何，如果您不想像 Kees 的回答那样使用 JS 方法，我可能只会为旧的 IE 设置 210px 宽的选择元素……糟糕的浏览器，因此更少（准确）的设计/布局……谁在乎呢。
您觉得我的回答有帮助吗？

标签： css

【解决方案1】：

我发现的一个示例仅使用 css 和一点 javascript 来更改 onclick 的宽度。

<style>
.ctrDropDown{
    width:145px;
    font-size:11px;
}
.ctrDropDownClick{
    font-size:11px;

    width:300px;

}
.plainDropDown{
    width:145px;
    font-size:11px;
}
</style>
<div style="padding:4px;width:175px;height:75px;border:thin solid black;overflow:hidden;">
I am the problem select list:<br><br>
<select name="someDropDown" id="someDropDown" class="plainDropDown">
    <option value="">This is option 1.</option>
    <option value="">This is the second option, a bit longer.</option>
    <option value="">Drink to me only with thine eyes, and I will pledge with mine...</option>
</select>
</div>
<br>
<hr width="150px;" align="left">
<br>
<div style="padding:4px;width:175px;height:75px;border:thin solid black;overflow:hidden;">
I am the better select list:<br><br>
<select name="someDropDown" id="someDropDown" class="ctrDropDown" onBlur="this.className='ctrDropDown';" onMouseDown="this.className='ctrDropDownClick';" onChange="this.className='ctrDropDown';">
    <option value="">This is option 1.</option>
    <option value="">This is the second option, a bit longer.</option>
    <option value="">Drink to me only with thine eyes, and I will pledge with mine...</option>
</select>
</div>

DEMO

也是一个 JSFIDDLE：HERE

希望对你有帮助！

【讨论】：