为什么这么难风格＆LT;选择＆GT;和＆lt;＆选项GT;要素？ [英] Why is it so hard to style <select> and <option> elements?

问题描述

任何浏览器的开发者，或者谁知道为什么如此困难的（如果不是不可能的）可的风格的＆LT的下拉列表中，选择＆GT; ，有任何真正的解释的prevents浏览器治疗＆LT;选择＆GT; ＆LT;期权方式＆gt; 以更便捷的方式。

Can any browser developer, or anyone who knows why it is so difficult (if not impossible) to style the dropdown list of a <select>, there's any "real explanation" that prevents browsers treat the <select> <option> in a more convenient way.

每当我看到像<一个问题href=\"http://stackoverflow.com/questions/30748110/how-to-modify-css-of-a-select-dropdown#30748110\">How修改下拉列表的CSS？的在收到类似的答案

Every time I see questions like How to modify CSS of a dropdown? in different sites that receive answers like

这是不可能的风格HTML的下拉列表中选择，但你可以建立自己的下拉列表中，或使用像引导一个框架。

"It's not possible to style the dropdown list of a html select. But you can build your own dropdown list or use a framework like bootstrap."

或

如果你决定，这绝对是个好主意来定制一个下拉列表，那么你应该使用JavaScript。

"If you decide that it's absolutely a good idea to customize a dropdown, then you should use JavaScript".

和我真的不知道为什么，我现在知道了＆LT;选择＆GT; ，我指的是集装箱箱，可样式使用多一点

And I really don't know why, I know now the <select>, I mean the container box, can be styled a little more using

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

然后给我们的风格，因为我们必须做一些技巧，以作出正确的这是不那么简单，因为所有说的，特别是著名的垃圾箭头。

And then giving our styles, which is not as simple as all say because we have to do some tricks to make it right, especially with the famous litter arrow.

随着时间的推移，我们忽略了这样一个简单舒适的＆LT;选择＆GT; 元素，几乎所有的开发商选择使用一些答案和至少我仍然不知道为什么。

As time passes we are neglecting such a simple and comfortable as the <select> element and almost all the developers opted to use some of the answers above and at least I still do not know why.

所以，至少我会很感激，如果有人可以帮助我。

So at least I will be grateful if someone could help me.

推荐答案

下拉列表是的高的依赖他们正在运行的系统上。只要看看他们是什么（ED），如在iOS上：

Dropdown lists are highly dependent on the system they're running on. Just look what they look(ed) like on iOS:

的＆LT;选择＆GT; 元素是给你一个统一的方式来标记可以选择的选项列表的功能。 如何该列表是重新presented完全取决于浏览器，浏览器可以在给定的情况下，最好的方式实现它。因此，它是没有意义的尝试的风格以任何方式，因为你不能predict如何将是摆在首位psented $ p $。

The <select> element is giving you a uniform way to mark up the functionality of a list of options which can be selected. How that list is represented is entirely up to the browser, and the browser can implement it in the best possible way for the given circumstances. As such it makes no sense to try to "style" it in any way, because you cannot predict how it's going to be presented in the first place.

通常每个操作系统的浏览器的运行有其内建的下拉列表，并且他们可以看到非常不同的不同的系统。这个想法是，＆LT;选择方式＆gt; 元素可以使用底层操作系统的本机下拉列表样式

Usually every operating system a browser runs on has native dropdown lists, and they can look very differently on different systems. The idea is that the <select> element can use the native dropdown list style of the underlying operating system.

这并不是说这是硬的事，那就是样式下拉列表是没有意义的给予presentation中立优先＆LT;选择＆GT; 元素集中体现。这是一个下拉列表中的所有系统什么的最小公分母的，因此系统特有的风格是没有意义的。

It's not that it's "hard" to do, it's that styling a dropdown list makes no sense given the presentation-neutral priorities the <select> element embodies. It is the lowest common denominator of what a dropdown list is across all systems, hence system-specific styling makes no sense.

这篇关于为什么这么难风格＆LT;选择＆GT;和＆lt;＆选项GT;要素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！