CSS Font-Family Support Dropped for <SELECT> in Firefox?

Question

The following CSS used to work in all browsers that I have tested. It even has an option selector to handle Firefox.

select,
option {
  font-family: "Lucida Console", Monaco, monospace;
}

<select>
  <option>PN-2345&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;The first element&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Hardware</option>
  <option>Pn-1332-CFG&nbsp;&nbsp;Second thing&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Powdercoat</option>
</select>

The newest versions of Firefox no longer properly apply font family styles. Former versions of Firefox, and every other major browser I've tested, fully apply the font family settings both to the select and to the items in the dropdown - now, it only gets applied to the select box itself, but NOT the dropdown.

Does Firefox still support font-family changes to dropdowns? If so, how?

Answer 1

You can set the font for both the select and option elements in Firefox using:

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