javascript - 如何改变html选择框的箭头颜色？

Question

我想设置 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>

Answer 1

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

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

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