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

我想把这个箭头的颜色改成蓝色

我有这个下拉菜单的代码。我尝试了这个解决方案，但它不工作

---

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

回到问题上来：你不能真正改变那种颜色。您可以尝试使用隐藏这些默认元素

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

并制作自定义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;

}

---

编辑：包括jfiddle和自己的样式

您共享的代码与链接问题中的任何代码都不匹配。请包含您正在使用的实际代码，包括CSS代码。使用相应的CSS编辑问题是这些元素是什么？将这些CSS添加到您的select元素将隐藏箭头。现在您可以尝试添加自己的三角形。我会尝试使用绝对定位来放置它。{appearance:none；}之后的表单控件：：尝试过，但仍然可见看到这个jsfiddle:jsfiddle对您有帮助吗？确保添加指针事件：无；添加到：：before元素，因此即使单击三角形，它也会打开该选项。

form-control{
       border:0 !important;
       outline:none !important;
       color:black;
       -moz-box-shadow: 0 0 3px #ccc;
       -webkit-box-shadow: 0 0 3px #ccc;
        box-shadow: 0 0 3px #ccc;
        /* padding:20px !important; */
        height: 43px !important;
        border-radius:4px !important;  
    }

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

}