为什么设置<select>和<option>元素这么难？

Question

可以任何浏览器开发人员,或任何知道为什么如此难以(如果不是不可能)设置a的下拉列表样式的人<select>,可以使用任何"真正的解释"来阻止浏览器<select> <option>以更方便的方式处理它.

每次我看到如何修改下拉菜单的CSS等问题？在收到答案的不同网站中

"不可能设置html选择的下拉列表的样式.但是你可以构建自己的下拉列表或使用像bootstrap这样的框架."

要么

"如果您认为定制下拉列表绝对是一个好主意,那么您应该使用JavaScript".

我真的不知道为什么,我现在知道了<select>,我的意思是容器盒,可以使用更多样式

select {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
}

然后给出我们的风格,这并不像所有人说的那么简单,因为我们必须做一些技巧才能做到正确,尤其是着名的垃圾箭头.

随着时间的推移,我们忽略了这样一个简单而舒适的<select>元素,几乎所有的开发人员都选择使用上面的一些答案,至少我仍然不知道为什么.

所以至少如果有人能帮助我,我将不胜感激.

Answer 1

下拉列表高度依赖于它们正在运行的系统.只需在iOS上查看它们的外观(ed):

iOS版

该<select>元素为您提供了一种统一的方法来标记可以选择的选项列表的功能.如何表示该列表完全取决于浏览器,并且浏览器可以在给定情况下以最佳方式实现它.因此,尝试以任何方式"设计"它是没有意义的,因为你无法预测它将如何首先呈现.

通常,运行浏览器的每个操作系统都具有本机下拉列表,并且它们在不同系统上的外观可能非常不同.我们的想法是该<select>元素可以使用底层操作系统的本机下拉列表样式.

这并不是说它很"难",因为<select>元素所体现的呈现中性优先级,下拉列表的样式是没有意义的.它是所有系统中下拉列表的最低公分母,因此系统特定的样式毫无意义.