<分区>
html - 使用 CSS 更改下拉箭头颜色
我想把这里的箭头颜色改成蓝色
我有下拉菜单的代码。我试过这个解决方案，但它不起作用
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;
}
最佳答案
看起来您正在使用默认的 HTML 选择框。这些通常由浏览器设置样式。您可以像以前一样更改小样式设置。看起来您正在使用像 bootstrap 这样的库，它为它们预定义了样式。
回到问题:你真的不能改变那个颜色。您可以尝试使用
隐藏这些默认元素appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
并制作自定义 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/
关于html - 使用 CSS 更改下拉箭头颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58290685/