Options in HTML <select> dropdown are too large in Chrome

Some change in recent versions of Chrome (probably June 2017) causes input options to <select>

display much more than other browsers (or older versions of Chrome).

For example, the dropdown menu of this w3schools page on some machines looks like this (Chrome 60.0.3112.90, 64 bit, Windows 10):

Chrome 60.0.3112.90, 64 bit, Windows 10

instead of expected (Firefox 55.0, 64-bit, Windows 10):

Firefox 55.0, 64-bit, Windows 10

Is there any workaround that can be implemented in code to prevent it (CSS preferred)?

So far I have found:

  • Discussion on the Chrome product forums confirming that many people have this, but no answer as to whether it was intentional or not. It has also been noted that the presence of touch drivers in the system can lead to this behavior.
  • Chromium bug # 739196 describing this issue, but also without a clear answer, whether this is intentional or a Chromium bug
  • Multiple answers suggesting that the shim for <option>

    in <select>

    cannot be controlled with CSS by design, so this addition has never been easy or possible to change.
+3


source to share


2 answers


Should be able to just add CSS styling for the tag <option>

to make it look the way you want it in most browsers.



http://jsfiddle.net/Ahreu/50/

0


source


An additional add-on was added in Chrome 59 for any device that Chrome believes has a touch interface. There is currently no way to disable this "feature".

Chrome shows two lines in dropdown menu



Google Chrome Help Forum

0


source







All Articles