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

Question

任何浏览器开发人员，或任何知道为什么如此困难（如果不是不可能）设置＆lt; select＆gt;的下拉列表样式的人，都有任何“真正的解释”阻止浏览器处理＆lt; select＆gt; ＆LT;选项＆GT;以更方便的方式。 每次我看到如何修改下拉菜单的CSS等问题？在收到答案的不同网站中 “不可能设置html选择的下拉列表的样式。但是你可以构建自己的下拉列表或使用像bootstrap这样的框架。” 要么 “如果您认为定制下拉列表绝对是一个好主意，那么您应该使用JavaScript”。 我真的不知道为什么，我现在知道＆lt; select＆gt;，我的意思是容器盒，可以使用更多的样式 选择 {    -webkit-appearance：none;    -moz-appearance：none;    外观：无; } 然后给出我们的风格，这并不像所有人说的那么简单，因为我们必须做一些技巧才能做到正确，尤其是着名的垃圾箭头。 随着时间的推移，我们忽略了像＆lt; select＆gt;这样的简单和舒适。元素和几乎所有开发人员选择使用上面的一些答案，至少我仍然不知道为什么。 所以至少如果有人能帮助我，我将不胜感激。

Answer 1

下拉列表高度取决于他们正在运行的系统。只需看看他们在iOS上的外观（编辑）：

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

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

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

Answer 2

我将在这里分享我在阅读有关选择后昨天写的答案。由于这不是同一个问题，我不会将其标记为重复，但无论如何都要讨论这个问题。

关于选择： 它们不是通常的DOM元素，这使得它们与其他元素的行为不同。似乎浏览器在DOM模型之外生成它们，然后像​​click或keypress on options这样的事件不起作用。

此外，像size这样的属性会改变它们的行为（大于1的大小会使它显示为列表，而不是下拉列表。）

检查这个答案： Check if select is displaying options

正如您所看到的，有一个Jquery的例子，那么您将能够设置它的样式，或者使用它的属性。还有一些有用的链接和它们的解释。

希望这个解释可以帮到你。

此致