如何更改html选择框的箭头颜色？

Question

我想设置引导程序的select元素，如下图所示：

但遗憾的是无法改变箭头的颜色。

#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>

Answer 1

如果您正在使用Bootstrap，您应该在按钮元素内部看到一个带有＆＃34;插入符号＆＃34;的范围。您需要更改COLOR样式。

Answer 2

无法在该浏览器的箭头上更改颜色。

这是一个使用包装器和伪元素的解决方法。

.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>

Answer 3

不要忘记使用 appearance CSS 属性来隐藏浏览器提供的默认向下箭头。

.myselect {
  position: relative;
}
.myselect select {
  height: 26px;
  appearance: none;
  color: #636A7B;
  padding: 0 20px;
}
.myselect::after {
    font-family: 'Font Awesome\ 5 Free';
    content: "\f107";
    position: absolute;
    font-weight: 600; 
    right: 5px;
    top: 7px;
    color: #C5C7D2;
    background: white;
}

这里是该物业的官方文档：https://developer.mozilla.org/en-US/docs/Web/CSS/appearance