我想设置 Bootstrap 的选择元素的样式,如下图所示:
但遗憾的是无法更改箭头的颜色。
#test{
border: 1px solid #dd6592;
border-radius: 0px;
text-align: center;
width:20%;
font-size: 16px;
margin-bottom: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<select class="form-control" id="test">
<option>Test</option>
<option>Test</option>
<option>Test</option>
</select>
最佳答案
无法在跨浏览器上更改该箭头的颜色。
这是一种解决方法,使用包装器和伪元素。
.myselect {
position: relative;
display: inline-block;
}
.myselect select {
height: 30px;
border-color: red;
padding-right: 10px;
outline: none;
}
.myselect::after {
content: '';
position: absolute;
right: 4px;
top: 11px;
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid rgba(255,0,0,1);
pointer-events: none;
}
<div class="myselect">
<select class="form-control" id="test">
<option>Test</option>
<option>Test</option>
<option>Test</option>
</select>
</div>
关于javascript - 如何改变html选择框的箭头颜色?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44375107/