任何浏览器开发人员,或任何知道为什么如此困难(如果不是不可能)设置< select>的下拉列表样式的人,都有任何“真正的解释”阻止浏览器处理< select> <选项>以更方便的方式.
每当我在不同的网站上看到像How to modify CSS of a dropdown?这样的问题时,会收到类似的答案
“不可能设置html选择的下拉列表的样式.但是你可以构建自己的下拉列表或使用像bootstrap这样的框架.”
要么
“如果您认为定制下拉列表绝对是一个好主意,那么您应该使用JavaScript”.
我真的不知道为什么,我现在知道< select>,我的意思是容器盒,可以使用更多的样式
select { -webkit-appearance: none; -moz-appearance: none; appearance: none; }
然后给我们的风格,这并不像所有人说的那么简单,因为我们必须做一些技巧才能做到正确,尤其是着名的垃圾箭头.
随着时间的推移,我们忽略了像< select>这样的简单和舒适.元素和几乎所有的开发人员选择使用上面的一些答案,至少我仍然不知道为什么.
所以至少如果有人能帮助我,我将不胜感激.
解决方法
下拉列表高度依赖于它们运行的系统.只需在iOS上查看它们的外观(ed):
< select> element为您提供了一种统一的方法来标记可以选择的选项列表的功能.如何表示该列表完全取决于浏览器,并且浏览器可以在给定情况下以最佳方式实现它.因此,尝试以任何方式“设计”它是没有意义的,因为你无法预测它将如何首先呈现.
通常,运行浏览器的每个操作系统都有本机下拉列表,并且它们在不同系统上的外观可能非常不同.想法是< select> element可以使用底层操作系统的本机下拉列表样式.
这并不是说它很“难”,而是因为表示中性优先级< select>而下拉列表的样式没有意义.元素体现.它是所有系统中下拉列表的最小公分母,因此系统特定的样式毫无意义.