Setting the font of the individual option in a drop-down menu?

Is it possible to set the font-family for each option in a drop down list开发者_运维技巧? If so, how is it done?

EDIT: Specifically, I'd like to see this work in Chrome.

---

Browser support is variable.

option.aClass /* or some other way to identify the specific option */ {
    font-family: times, serif;
}

---

You need to assign a class to each option and style it ..

html

<select>
    <option class="c1">this option has c1</option>
    <option class="c2">this option has c2</option>
</select>

Css

.c1 {font-family:courier;color:red}
.c2 {font-family:arial;font-weight:bold;;color:blue;}

example at http://jsfiddle.net/xdXFz/

---

It works only in FF (from my tests), all other browsers (IE, Chrome, Safari, Opera) only take into consideration the color..

---

You could assign a class attribute to each <option>, however this isn't suported by most a lot of user agents. I would investigate some fancy JQuery / framework solution.

---

In my experience it's better to create your own drop-down list than to style these types of controls.