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

【问题标题】：How to change the arrow color of the html select box?如何更改html选择框的箭头颜色？
【发布时间】：2017-11-06 14:10:54
【问题描述】：

我想为 bootstrap 的 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>

【问题讨论】：

你能告诉我们你到目前为止尝试过的代码吗？
@nafi-pantha .. 你能把你的代码贴在这里吗？，

标签： javascript jquery html css twitter-bootstrap-3

【解决方案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>

【讨论】：

【解决方案2】：

如果您使用的是 Bootstrap，您应该在按钮元素内看到一个带有“caret”类的 span。您需要更改颜色样式。

【讨论】：

【解决方案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

【讨论】：