Some change in recent Chrome versions (likely in June 2017) cause options in a <select> input to render much bigger than in other browsers (or in older versions of Chrome).
For example, dropdown on this w3schools page on some machines renders like this (Chrome 60.0.3112.90, 64 bit, Windows 10):
instead of expected (Firefox 55.0, 64-bit, Windows 10):
Is there any workaround that can be implemented in code to prevent it from happening (CSS solution preferred)?
So far I've found:
- Discussion on Chrome product forums, which confirms that this is observed by many people, but there's no answer whether it was intentional or not. Also, observations were made that presence of touchscreen drivers in a system might cause this behaviour.
- Chromium bug #739196 describing this issue, but also with no clear answer whether it's intentional or a Chromium bug
- few answers suggesting that padding for
<option>'s in a<select>can't be controlled via CSS by design, so this padding was never easy or possible to change.