How can I style options in a select list using CSS?
I have successfully styled the options in Mozilla Firefox, but the styles do not apply in Internet Explorer and Chrome.
Here is a jsFiddle link for IE
<select class="mapField">
<option value="1">This is option 1 of the select list</option>
<option value="2">This is option 2 of the select list</option>
<option value="3">This is option 3 of the select list</option>
</select>
<style>
select.mapField{
width:120px;
}
.mapField option{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 100px;
}
</style>
Any suggestions or solutions would be greatly appreciated. Thank you!