使用 CSS 更改下拉箭头颜色 [重复]答案

【问题标题】：change dropdown arrow color with CSS [duplicate]使用 CSS 更改下拉箭头颜色 [重复]
【发布时间】：2019-10-09 01:32:18
【问题描述】：

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

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

HTML CSS Change Color of SELECT ARROW

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

CSS .

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

【问题讨论】：

您共享的代码与链接问题中的任何代码都不匹配。请edit your question 包含您正在使用的实际代码，包括 CSS 代码。
用相应的 CSS 编辑

标签： html css

【解决方案1】：

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

回到问题：你不能真正改变那种颜色。您可以尝试使用

隐藏这些默认元素

外观：无；
-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 https://jsfiddle.net/3ngzk1vp/1/

【讨论】：

问题是这些元素是什么？
将这些 css 添加到您的选择元素将隐藏箭头。现在您可以尝试添加自己的三角形。我会尝试用绝对定位放置它。
.form-control::after{ 外观：无； } 试过了，但它仍然可见
查看这个 jsfiddle：jsfiddle.net/3ngzk1vp
jsfiddle 对你有帮助吗？确保添加指针事件：无；到 ::before 元素，因此即使您单击三角形，它也会打开选项。