Firefox dropdown size not showing

Question

I need to increase the font for the <option> list <select> . Although this works easily in Chrome, in Firefox the only thing that increases is the option you choose. My version of Firefox is 50.1.0

Referring to this script , I get the following various results:

Firefox:

Chrome:

 select { font-size: 200%; } 

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

I expect to get the same behavior on Chrome in Firefox.

Answer 1

After a little tracking, I see some people reporting this issue in newer versions of Firefox. I myself use the development version, and I have the same problem as you.

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

There is a section on the style of window selection over multiple browsers / devices, but your options look subtle.

Usually CSS attributes, such as -moz-appearance: none , can help, but in this case I don’t see the work, I saw messages about this, which is a bug in new versions of Firefox, so my fingers crossed it in the near future. Good luck

Answer 2

This is a bug in Firefox, but it has not yet been fixed.

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

Turn off the Multi-Process and it will work fine.

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

Go to: configuration. Search "browser.tabs.remote.autostart". There may be several results. Set them to false and restart the browser.

Error link:

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

Answer 3

UPDATE

I forgot to fully explain the method underlying my insanity, simply because I was not 100% sure that my decisions would work due to some little-known error that occurs on some Macs on the full moon (as you can say, I'm using a PC and jealous of Mac graphics.)

Thought you had a Mac, I'm bad. Despite this, the solutions work.

When working with fonts and inheritance, we can naturally assume that we have body {font-size:16px;} , which will be cascaded to other elements, such as a comfortable 16px blanket to everything. Form elements are ignored and do not inherit the default font properties by default. We can fix this as follows:

• Using the inherit value, as in the case of patch 1 or ...
• ... inherit from the parent, as in fix 2 or ...
• ... just like in the fix file.

---

There are 3 fixes in this snippet, and one of them, I hope, will work for you.

SNIPPET

 html, body { width: 100%; height: 100%; box-sizing: border-box; font: 600 16px/1 Verdana; } * { margin: 0; padding: 0; line-height: 1; } fieldset { padding: 10px; margin: 50px auto; } legend { text-align: right; } select { width: 6ex; } /* Fix #1 |~~~~~~~~*/ select#X { font-size: 2em; } select#X > option { font-size: inherit; } /* Fix #2 |~~~~~~~~*/ select#Y { font-size: 200%; } select#Y > option { font-size: 100%; } /* Fix #3 |~~~~~~~~*/ select#Z { font-size: 32px; } select#Z > option { font-size: 32px; } 

 <fieldset> <legend> <h1>Font-size</h1> <h2>Select<br> Option</h2> </legend> <select id='X' name='X'> <option value="X">X</option> <option value="1">2em</option> <option value="2">inherit</option> </select> <select id='Y' name='Y'> <option value="Y">Y</option> <option value="1">200%</option> <option value="2">100%</option> </select> <select id='Z' name='Z'> <option value="Z">Z</option> <option value="1">32px</option> <option value="2">32px</option> </select> </fieldset> 

Answer 4

This does not work in Firefox 66