Firefox dropdown option font-size not being rendered

Question

I need to increase the font for the <option> of a <select> list. While this works easily in Chrome, in Firefox the only thing that is being increased is the selected option. My Firefox version is 50.1.0

Referring to this fiddle, I obtain the following different results:

Firefox:

Chrome:

select {
  font-size: 200%;
}

<select>
    <option value="1">One</option>
    <option value="2">Two</option>
</select>

I'm expecting to obtain the same behaviour of Chrome also in Firefox.

Answer 1

This is a bug in Firefox but still not fixed.

They said it was resolved, but the issue still exists.

Disable Multi-Process and it will work fine.

How to disable Multi-Process: (from LINK):

Go to about:config. Search for "browser.tabs.remote.autostart". There may be multiple results. Set them all to false and restart the browser.

Bug Link:

https://bugzilla.mozilla.org/show_bug.cgi?id=910022

Answer 2

After doing a little bit of snooping around I see that some people have reported this issue in newer versions of Firefox. I myself use the development version and I have the same issue as you.

This article by the guys over at Mozilla is quite interesting in this regard.

There's a section on select box styling over mutliple browsers/devices, but your options look thin.

Normally CSS attributes like -moz-appearance: none can help but in this case I can't see a work around, I've seen reports of this being a bug in newer versions of Firefox, so fingers crossed it's gone soon. Good luck!