Mohal Mohal - 1 month ago 4
CSS Question

How to change font-family of drop down's list item?

I have a drop-down that lists font families. Like Tahoma, Arial, Verdana, etc. I want to change the font-family of each drop-down item according to the value it represents. Just like Photoshop does it.

I changed the CSS for each drop-down item but it only works on FireFox. It doesn't work on any other browser.

I don't want to use any jQuery plugin.


That's because the select elements children (options) aren't really stylable and firefox seems to be the only browser to ignore that part of the spec.

The workaround is to replace your select element with a custom widget that uses only stylable elements and perhaps a little javascript for the interactivity. like what's done here: or