Possible Duplicate:
Change css font-family for separate options in select tag
Styling options in bold in Internet Explorer
I am not able to set font-family of a dropdown list of HTML select in IE8,9. Is it a bug/property or am I doing something wrong? Font-size setting works. The example is too extreme my real problem is that I have different font on the page and in the list.
I don't care about IE7-.
Example( http://jsfiddle.net/SDcLX/11/):
I have following HTML:
aaaaa
<div class="container">
skjhlks <select>
<option class="courier">courier</option>
<option>aa</option>
<option style="font-family:impact;" selected="selected" >bb</option>
</select>
</div>
and CSS
.container
{
font-size:30px;
font-family:Lucida Handwriting;
}
select
{
font-family:inherit;
font-size:inherit;
}
option.courier
{
font-family:courier;
}
The result in FF is:
and in IE:
The question is also a duplicate of styling options in bold in internet explorer
Apparently IE uses the operationg system to render the controls.
Perhaps you can use a js widget instead like this one It takes a basic select but transorms it with jquery.