CSS 更改下拉箭头的颜色和外观
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/611482/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change color and appearance of drop down arrow
提问by Iris
I want to change the default appearance of the arrow of a dropdown list so that looks the same across browsers. Is there a way to override the default look and feel of the drop down arrow using CSS or otherwise ?
我想更改下拉列表箭头的默认外观，以便在浏览器中看起来相同。有没有办法使用 CSS 或其他方式覆盖下拉箭头的默认外观？
回答by Sphvn
You can acheive this with CSS but you are not techinically changing the arrow itself.
您可以使用 CSS 实现这一点，但您并没有在技术上改变箭头本身。
In this example I am actually hiding the default arrow and displaying my own arrow instead.
在这个例子中，我实际上隐藏了默认箭头，而是显示了我自己的箭头。
.styleSelect select {
background: transparent;
width: 168px;
padding: 5px;
font-size: 16px;
line-height: 1;
border: 0;
border-radius: 0;
height: 34px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
color: #000;
}
.styleSelect {
width: 140px;
height: 34px;
overflow: hidden;
background: url("images/downArrow.png") no-repeat right #fff;
border: 2px solid #000;
}<div class="styleSelect">
<select class="units">
<option value="Metres">Metres</option>
<option value="Feet">Feet</option>
<option value="Fathoms">Fathoms</option>
</select>
</div>回答by TomHastjarjanto
No, cross-browser form custimization is very hard if not impossible to get it right for all browsers. If you really care about the appearance of those widgets you should use a javascript implementation.
不，如果不是不可能，跨浏览器表单自定义对于所有浏览器来说都是非常困难的。如果您真的关心这些小部件的外观，您应该使用 javascript 实现。
see http://www.456bereastreet.com/archive/200409/styling_form_controls/and http://developer.yahoo.com/yui/examples/button/btn_example07.html
参见http://www.456bereastreet.com/archive/200409/styling_form_controls/和http://developer.yahoo.com/yui/examples/button/btn_example07.html
回答by Lambder
It can be done by:
可以通过以下方式完成：
select{
background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+) no-repeat 100% 50%;
}
select{
background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+) no-repeat 100% 50%;
-moz-appearance: none;
-webkit-appearance: none;
-webkit-border-radius: 0px;
appearance: none;
outline-width: 0;
padding: 10px 10px 10px 5px;
display: block;
width: 10em;
border: none;
font-size: 1rem;
border-bottom: 1px solid #757575;
}<div class="styleSelect">
<select class="units">
<option value="Metres">Metres</option>
<option value="Feet">Feet</option>
<option value="Fathoms">Fathoms</option>
</select>
</div>回答by Diodeus - James MacFarlane
The <select>element is generated by the application and styling is not part of the CSS/HTML spec.
该<select>元件是由应用程序生成的和造型不是CSS / HTML规范的一部分。
You would have to fake it with your own DIV and overlay it on top of the existing one, or build your own control emulating the same functionality.
您必须使用自己的 DIV 伪造它并将其覆盖在现有 DIV 之上，或者构建自己的控件来模拟相同的功能。
回答by Chad Birch
No, you can't do it by using an actual <select>, but there are techniques that allow you to "replace" them with javascript solutions that look better.
不，您不能通过使用实际的 来做到这一点<select>，但是有一些技术可以让您用看起来更好的 javascript 解决方案“替换”它们。
Here's a good article on the topic: <select> Something New
这是一篇关于该主题的好文章：<select> 新事物
回答by sb333
We have used YUI, Chosen, and are currently using the jQuery Select2 plugin: https://select2.github.io/
我们使用过 YUI、Chosen，目前正在使用 jQuery Select2 插件：https: //select2.github.io/
It's pretty robust, the arrow is just the tip of the iceberg.
它非常坚固，箭头只是冰山一角。
As soon as stylized selects becomes a requirement, I agree with the others, go with a plugin. Don't kill yourself reinventing the wheel.
一旦风格化选择成为一项要求，我同意其他人的意见，使用插件。不要杀死自己重新发明轮子。
回答by Richard
Not easily done I am afraid. The problem is Css cannot replace the arrow in a select as this is rendered by the browser. But you can build a new control from div and input elements and Javascript to perform the same function as the select.
恐怕不容易做到。问题是 Css 无法替换选择中的箭头，因为这是由浏览器呈现的。但是您可以从 div 和 input 元素以及 Javascript 构建一个新控件来执行与选择相同的功能。
Try looking at some of the autocomplete plugins for Jquery for example.
例如，尝试查看一些 Jquery 的自动完成插件。
Otherwise there is some info on the select element here:
否则这里有一些关于 select 元素的信息：
http://www.devarticles.com/c/a/Web-Style-Sheets/Taming-the-Select/
http://www.devarticles.com/c/a/Web-Style-Sheets/Taming-the-Select/
回答by Bojan
Try changing the color of your "border-top" attribute to white
尝试将“border-top”属性的颜色更改为白色
回答by TheTXI
Unless you plan on creating your own drop down list (and not using a standard library drop down list), you are stuck. The DDL control's look is going to be based upon the system you are running and/or the browser that is rendering the output.
除非您计划创建自己的下拉列表（而不是使用标准库下拉列表），否则您会陷入困境。DDL 控件的外观将基于您正在运行的系统和/或呈现输出的浏览器。
