Hi Steve, is this a problem with a font-size specified in the page by its style rules, or in Firefox settings, or by an add-on?

Generally speaking, the options of Select controls starting rendering differently after Firefox became a multi-process application (around Firefox 48-52) and styling flexibility has been restored gradually over time. However, it may never be as flexible as it was before unless the developers back away from the principle that form controls should follow the style of the operating system instead of giving web authors freedom to go wild with them.

It is simply a case of Firefox not applying style rules for <options>

Every other browser applies the style rules in CSS except Firefox, even Edge displays correctly.

See the images attached.

regards Steve

Any news on this? I have struggled with this problem after every FF update for quite some time. Toggling browser.tabs.remote.autostart in the config helped so far, but after the update to 68.0 has no effect anymore. It is driving me nuts since it destroys the layout of a very important tool for me.

Hi farbanomalie, Firefox 68 no longer has the "single process" option you have been using as a workaround in Firefox 48-67.

As of Firefox 67, pages can set the font face, size, weight, style, and color, and background color, for the options. However, pages cannot tighten the vertical spacing of the list.

It is driving me nuts since it destroys the layout of a very important tool for me.

How would you describe the problem caused by wider spacing of the options? For example, are the lists too long to fit on the screen, or they block things you need to reference while using the list, or your productivity is reduced by having to move the mouse further from the active part of the page, or something else?

Font-face etc. still isn’t applied in my FF to options. I have not set vertical spacing, but a font-face, size and text-align, padding and line-height. Some is set directly for options, some of it is set for select, but should be inherited. Nothing of this is applied to options, only the CSS for the overall select is used. (Also, right-clicking doesn’t give me a context menu, so I have to layway the inspection from the parent select.)

My main problem is that text-align: right isn’t applied to options which would give me a proper overview over the options when the select is opened, since the options represent things in a tree-like structure: a thing > sub-category a > category A another thing > sub-category a > category A ...

Guess I’ll try to re-install FF and import all my stuff since I am also having other issues like all my installed add-ons randomly disappearing.

Hi farbanomalie, in multiprocess mode, Firefox uses a standard height for <option>s. Any rules related to height, line-height, padding-top, padding-bottom, appear to be ignored. I've never thought of using text-align for options, but based on your testing, that is ignored, too.

Font-face etc. still isn’t applied in my FF to options.

What if you use !important for your font-family and font-size rules for the options?

Guess I’ll try to re-install FF and import all my stuff since I am also having other issues like all my installed add-ons randomly disappearing.

Hopefully it will help with the other issues, but please post about them again if they continue.

Re-installed FF 68.0, but nothing changed regarding the CSS issues, right after a fresh install without any custom FF settings made or add-ons installed.

I fiddled with the CSS rules and had a deeper look on the situation in the web developer inspector. It shows all rules applied and the settings computed properly––theoretically––so they aren’t overwritten or something like this. They just aren’t executed in the display of FF as they should be according to the inspector.

I’m on my wits’ end with this and searching the internet about this also only gives me results about the old issue and if there are any current answers at all, they say it was resolved with 66 or earlier. Frustrating.

Interestingly, adding style "direction: rtl" to the select makes the text align to the right in the options which cures the biggest pain for me. It moves the dropdown arrow to the left, but I can live with that as a workaround until hopefully this issue will be fixed at some point.

I also fiddled with some javascript bits that replace the actual select with a js custom built dropdown that can be styled, but I didn’t find a script that also has all the basic functionality of a real select dropdown that automatically builds a vertical scrollbar when needed with tons of options and that selects the next fitting option while typing on a focused select.

Edit: direction: rtl makes a weird mess of options starting with numbers while all other options stay the same way, they read left to right as before, only the text is aligned to the right. An option like "2019 » [some text] » [some more text]" turns into "[some text] » [some more text] « 2019" ... chaotic behaviour.