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

但不幸的是不能改变箭头的颜色。

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

来源

2017-06-05 Nafi Pantha

你能告诉我们你迄今为止尝试过的代码？ –

@ nafi-pantha ..你可以在这里发布你的代码吗， –

无法在该箭头跨浏览器上更改颜色。

这是一个解决方法，使用包装和伪元素。

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

来源

2017-06-05 18:27:22 LGSon

谢谢你......感谢它......与此相关的另一个问题，如果有任何方式来居中文本或它像去一样？ –

@NafiPantha不，不能居中文本。如果你需要这个，你需要创建一个自定义选择元素。 – LGSon

如果使用的是引导，你应该可以看到右侧的按钮元素与一流的“插入符号”的跨度内。您需要更改COLOR样式。

来源

2017-06-05 18:17:28 Chere

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

回答

相关问题