'Firefox Select dropdown is not inheriting page font

A problem I'm encountering on my web pages is that on Firefox (and Firefox only), the options inside <select> tags are not affected by font-family: inherit. The <option>s should inherit <body>'s specified font-family their parent's specified font family.

Instead, they use the fonts specified in the user's Firefox profile. So, if the user's Firefox settings have the default font type set to "Serif", Dropdowns look gross. The select element in itself inherits the page font properly but the options in the dropdown don't, as you can see here:

image

They should have the same font as the first option in the select.

Is there any way to make them? I've tried to specify a CSS rule to make them inherit the font forcefully but it doesn't do anything:

option {
    font-family: inherit;
}

Forcing a font works but that's not necessarily what I want.

Is there a way to do this without editing the DOM or without using JS, or is this just impossible with Firefox?

cssfirefox


Solution 1:[1]

This did the trick for me.

select, option {
  font: -moz-pull-down-menu;
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Daan vP

Related Questions