选择箭头的 HTML CSS 更改颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38870246/
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
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-29 13:40:57 来源:igfitidea点击:
HTML CSS Change Color of SELECT ARROW
提问by Derek
I'm looking to change the color of the SELECT arrow to blue.
我希望将 SELECT 箭头的颜色更改为蓝色。
Is there a simple way to do this?
有没有一种简单的方法可以做到这一点？
回答by Kushan
try this code segment,
试试这个代码段，
<div class="customerStyle">
<select class="selectCustomer">
<option value="Jone">Jone</option>
<option value="Tom">Tom</option>
</select>
</div>
.customerStyle select {
background: transparent;
width: 170px;
padding: 5px;
border: 0;
border-radius: 0;
height: 35px;
}
.customerStyle {
background: url("images/arrow.png") no-repeat right #ffffff;
border: 1px solid #000;
width: 150px;
height: 35px;
overflow: hidden;
}
Add blue color arrow image for "images/arrow.png"
为“images/arrow.png”添加蓝色箭头图像
回答by Yasir Khan
.select_box{
width: 200px;
overflow: hidden;
border: 1px solid #000;
position: relative;
padding: 10px 0;
}
.select_box:after{
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid #f00;
position: absolute;
top: 40%;
right: 5px;
content: "";
z-index: 98;
}
.select_box select{
width: 220px;
border: 0;
position: relative;
z-index: 99;
background: none;
}<div class="select_box">
<select>
<option>Test This Select</option>
<option>Test This Select</option>
</select>
</div>