There has been a recent change in Chrome versions, likely in June 2017, that is causing options in a <select> input to appear much larger than in other browsers or older versions of Chrome.
For instance, on some machines, the dropdown on this w3schools page may look like this (Chrome 60.0.3112.90, 64-bit, Windows 10):
https://i.sstatic.net/u64Wi.png
instead of the expected appearance (Firefox 55.0, 64-bit, Windows 10):
https://i.sstatic.net/4hqQe.png
Is there a workaround that can be implemented in the code to prevent this from happening (preferably a CSS solution)?
So far, some findings include:
- A discussion on Chrome product forums confirming that many people have observed this issue, but no clear answer on whether it was intentional or not. Additionally, there have been observations that the presence of touchscreen drivers in a system might be causing this behavior.
- Chromium bug #739196 describing the issue, but also without a clear answer on whether it's intentional or a Chromium bug
- A few responses suggesting that padding for
<option>elements in a<select>cannot be controlled via CSS by design, making it difficult or impossible to change the padding.