Html 如何在不使用图像的情况下更改选择下拉箭头颜色？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26568845/
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
How to change the select drop down arrow color without using an image?
提问by bonzo
So I'm trying to get the arrow in a select tag to be a custom color. Example:
所以我试图让选择标签中的箭头成为自定义颜色。例子：
<input type="checkbox" class="checkbox1" checked="checked" />
<input type="text" spellcheck="false" size="20" />
<select class="dropdown">
<option value=">">></option>
<option value="<"><</option>
<option value=">=">≥</option>
<option value="<=">≤</option>
<option value="==">=</option>
<option value="!=">≠</option>
</select>
I've seen a lot of advice to use an image instead, but I can't do that. Maybe using ▼▼ could be part of a solution?
我已经看到很多建议使用图像来代替，但我不能那样做。也许使用▼▼ 可能是解决方案的一部分？
回答by Michail Michailidis
LATEST UPDATE: (jsFiddle: http://jsfiddle.net/ztayse92/) Made the arrow of the previous solution to be under the dropdown and used transparent background. This is as perfect as it can get and it solves the overlay/hover not clickable region problem.
最新更新：（jsFiddle：http: //jsfiddle.net/ztayse92/）将上一个解决方案的箭头放在下拉菜单下并使用透明背景。这是尽可能完美的，它解决了覆盖/悬停不可点击区域的问题。
UPDATE: Hack answer without using an image:(jsFiddle: http://jsfiddle.net/swpha0s0/4/)
更新：在不使用图像的情况下破解答案：（jsFiddle：http: //jsfiddle.net/swpha0s0/4/）
I made a container with relative positioning and I put the drop-down select and the overlay symbol (arrow) with absolute positioning. In CSS I also remove the arrow styling completely. The only drawback is that since the arrow symbol is an overlay it is not clickable or in other words when the mouse clicks on the arrow the drop down won't open. I made the arrow take least space possible. I also thought of putting a click handler on the arrow and open the drop-down with JavaScript but according to this (Is it possible to use JS to open an HTML select to show its option list?) it is not possible. I made the cursor be default when you hover over arrow so the user doesn't take the wrong feedback that this is clickable as well. So this is the closest solution to what you want - I am curious why no images are allowed and what is the use case for that??
我制作了一个具有相对定位的容器，并将下拉选择和覆盖符号（箭头）与绝对定位放置在一起。在 CSS 中，我还完全删除了箭头样式。唯一的缺点是，由于箭头符号是一个叠加层，它不可点击，或者换句话说，当鼠标点击箭头时，下拉菜单不会打开。我使箭头尽可能占用最少的空间。我还想过在箭头上放置一个单击处理程序并使用 JavaScript 打开下拉列表，但根据此（是否可以使用 JS 打开 HTML 选择以显示其选项列表？） 这不可能。当您将鼠标悬停在箭头上时，我将光标设为默认值，这样用户就不会收到错误的反馈，认为这也是可点击的。所以这是最接近您想要的解决方案 - 我很好奇为什么不允许使用图像以及它的用例是什么？
HTML:
HTML：
<div class="parent">
<select class="dropdown">
<option value=">">></option>
<option value="<"><</option>
<option value=">=">≥</option>
<option value="<=">≤</option>
<option value="==">=</option>
<option value="!=">≠</option>
</select><div class="overlay-arrow">▼</div>
</div>
CSS:
CSS：
select.dropdown {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-position: 22px 3px;
background-size: 13px 13px;
width: 40px;
height: 20px;
margin-left: 4px;
position: absolute;
cursor: pointer;
}
.overlay-arrow {
font-size: 9px;
color: red;
position: absolute;
right: 0px;
top : 10px;
cursor: default;
line-height: 1px;
}
.parent {
position: relative;
width: 40px;
height: 20px;
float: left;
margin: 0px;
padding: 0px;
}
Original Answer with image:(jsFiddle: http://jsfiddle.net/swpha0s0/2/) :
带有图像的原始答案：（jsFiddle：http: //jsfiddle.net/swpha0s0/2/）：
I would suggest you use CSS like that
我建议你像这样使用 CSS
select.dropdown {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: url('http://www.durhamcollege.ca/wp-content/themes/dc/images/green_download_arrow.png') no-repeat;
background-position: 22px 3px;
background-size: 13px 13px;
width: 40px;
height: 20px;
margin-left: 4px;
}
.dropdown-container {
float :left;
margin: 0px;
}
input {
margin-top:4px;
float: left;
display: block;
}
input[type=checkbox]{
margin-top:8px;
}
You have to statically change the background-position and center it the way you like but it is good if you just need to change the arrow appearance or put your own image. It is not possible to do that without image/css or javascript (if you want to change the widget entirely). You can toggle a class when you click it to change the background so you can have another arrow pointing upwards too.
您必须静态地更改背景位置并以您喜欢的方式居中，但如果您只需要更改箭头外观或放置自己的图像，那就太好了。如果没有 image/css 或 javascript（如果你想完全改变小部件），这是不可能的。您可以在单击某个类以更改背景时切换它，这样您也可以有另一个向上的箭头。
