Is there a way to style a select box without changing its fixed width when using lowercase and uppercase letters in the option tag? How can I achieve this with 'width="auto"'?
DEMO: http://jsfiddle.net/uG3gq/
<div class="select_box" style="margin: 10px 5px 0 5px;">
<select name="type_star">
<option disabled="disabled" value="">Select</option>
<option>Ttttttttttttttttttttt</option>
<option>Aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</option>
<option>B</option>
<option>C</option>
</select>
</div>
.select_box {
overflow:hidden;
background:url(http://img4up.com/up2/17845058228414984898.png) no-repeat right #9ff;
height:24px;
font:13px Tahoma,Arial,Helvetica,Sans-serif;
color:#888888;
padding:0;
}
.select_box select {
background:transparent;
padding:0 0 0 0;
border:1px soild #666;
font-size:16px;
color:#888888;
height:26px;
-webkit-appearance:none;
outline: none;
}