Why is Firefox 57 not styling my <option> elements like other browsers?

Admin 1
Viewed 2199

The new FireFox 57 Quantum does not honor my CSS dropdown selection list styling (only the default <select> value is honored). In all other browsers it works as it should. How to deal with this new version FF browser in terms of using my CSS styling for all of my select's <option>s? Chrome displays the options correctly.

Images for how it looks in FF57 and Chrome, respectively:

FF57

Chrome

input[type="date"], input[type="email"], input[type="number"], input[type="password"], input[type="text"], input[type="url"], option, select, textarea {
font-size:20px;
font-weight: 700;
font-family: "times new roman";
}
<select id="Ultra">
     <option value="0">My first value looks good</option>
     <option value="8">text1 blalalabababalallaala</option>
     <option value="5">text2 oeleoeleleoeleloelele</option>
     <option value="77">text3 wwowowowoowoww</option>
</select>

firefox css
1 Answers

FireFox has had issues with this for a long time (see bug https://bugzilla.mozilla.org/show_bug.cgi?id=910022).

The current status as mentioned in MDN <option>

  1. When Mozilla introduced dedicated content threads to Firefox (through the Electrolysis, or e10s, project), support for styling <option> elements was removed temporarily. Starting in Firefox 54, you can apply foreground and background colors to <option> elements again, using the color and background-color CSS properties. See bug 910022 for more information. Note that this is still disabled in Linux due to lack of contrast (see bug 1338283 for progress on this)

So currently only color and background-color can be customized.

user_1281650
Related