選択タグとオプションタグの幅が異なるドロップダウンメニューがあります:-
#select{
width:150px;
>option{
width:210px;
}
}
このコードは、IE7 と IE8 を除く他のすべてのブラウザーで正常に動作します。これらのブラウザーでは、オプション タグも幅を 150px として使用しています。これを修正する方法?? 助けてください....
選択タグとオプションタグの幅が異なるドロップダウンメニューがあります:-
#select{
width:150px;
>option{
width:210px;
}
}
このコードは、IE7 と IE8 を除く他のすべてのブラウザーで正常に動作します。これらのブラウザーでは、オプション タグも幅を 150px として使用しています。これを修正する方法?? 助けてください....
私が見つけた例では、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>
また、JSFIDDLE:こちら
それが役に立てば幸い!