6

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:

enter image description here

and in IE:

enter image description here

Community
  • 1
  • 1
IvanH
  • 5,039
  • 14
  • 60
  • 81
  • It is at least similar but what is not stated is that it is a problem of IE. My aim is to have the same font as in other part of my page or to have a statement that it is not possible. – IvanH Sep 21 '12 at 06:59

1 Answers1

0

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.

Community
  • 1
  • 1
FHoffmeyer
  • 121
  • 1
  • 4