不同宽度的选择和选项标签下拉

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

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

此代码工作正常在所有其他浏览器除了IE7 & IE8。在这些浏览器中，选项标签也使用150px的宽度。如何解决这个问题？请帮助....

来源

2013-06-06 Arpit Gupta

你能给我们你的下拉菜单的HTML代码吗？或者如果可能的话一个jsfiddle？ –

这不是你在这里提供的真正有效的CSS代码。无论如何，如果你不想像Kees的答案那样使用JS方法，那么我可能会选择宽210px的元素作为较老的IE ......低劣的浏览器，因此更少（精确）的设计/布局......谁在乎。 – CBroe

您是否认为我的回答有用？ –

我发现一个例子只使用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

希望它能帮助！

来源

2013-06-06 10:04:08

不同宽度的选择和选项标签下拉

回答

相关问题