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

Question

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.

Answer 1

Should be able to just add some CSS styling for the <option> tag to get it to look the way you want on most browsers.

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

Answer 2

Chrome 59中添加了额外的填充，用于Chrome认为具有触摸界面的任何设备。目前无法禁用此“功能”。

Chrome shows two rows in Dropdown-menu

Google Chrome Help Forum

Answer 3

在Windows 10 + Chrome上观察到相同的问题，没有实际的触摸屏界面。

卸载/安装“ Synaptics指点设备”（笔记本电脑上的触摸板）已为我解决了此问题。正如其他论坛所提到的，它似乎与Chrome有关，认为它在支持触摸的设备上。值得尝试禁用/重新安装可能出现的设备。