Search code examples
csshtml-selectfont-family

Setting font-family in select options doesn't work for Chrome and IE browsers

I want to define different font-family styles to options of a select, for example:

<select>
    <option style="font-family:Arial;">AAAA</option>
    <option style="font-family:Times New Roman;">AAAA</option>
    <option style="font-family:Comic Sans MS;">AAAA</option>
</select>

But this code doesn't work in IE and Chrome Browsers.

Solution

  • The options tags are created by the browsers UI styles and are hard and inconsistent to style. You would either want to use some javascript, build it as something other than a select (such as a list) or my preference, leave it as the browser default.