使用CSS更改下拉箭头的颜色

Question

我想将箭头颜色更改为蓝色

我在下拉菜单中有此代码。我尝试了此解决方案，但无法正常工作

HTML CSS Change Color of SELECT ARROW

(n+1)th

CSS

<div class="form-group" style="float:right;margin-right:0px">
                <label for="priority">Task priority</label><br>
                <select class="form-control" style="width:380px">
                <option value="urgent" selected="selected">Urgent</option>
                <option value="important">important</option>
                <option value="later">Later</option>
                </select>
                </div>
                </div>

Answer 1

您似乎正在使用默认的HTML选择框。这些通常由浏览器设置样式。您可以像以前一样更改小的样式设置。看起来您正在使用引导程序之类的库，它为它们预定义了样式。

回到问题：您不能真正更改该颜色。您可以尝试使用

隐藏这些默认元素

  

外观：无；   
-moz外观：无；
    -webkit-appearance：无；

并进行自定义CSS样式。

.selectorDiv
{
  position:relative;
  display: inline-block;
}

.selectorDiv::before
{
  position: absolute;
  right: 20px;
  top:0;
  bottom:0;

  margin-top:auto;
  margin-bottom:auto;

  margin-left: auto;

  content: "";
  z-index:5;

  width: 0; 
  height: 0; 
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;

  border-left: 10px solid green;  

  pointer-events:none;

}

编辑：包括带有自己样式https://jsfiddle.net/3ngzk1vp/1/的jfiddle