悬停时的Bootstrap下拉列表自定义

Question

我有一个使用bootstrap-select制作的引导下拉列表。以下是相同的代码：

HTML

 <select class="selectpicker">
     <option>Mustard</option>
     <option>Ketchup</option>
     <option>Relish</option>
 </select>

JS：

 $('.selectpicker').selectpicker({
        style: 'btn-select',
        size: 2
 });

悬停时，我希望插入符号的背景颜色变为黄色，类似

我已经改变了插入符号的CSS，如下所示：

.btn-select
{
    background-color: #FFF !important;
    border: 1px solid #9EBBDE !important;
    border-radius: 2px !important;
}


.btn-select span.bs-caret
{
    height:10px !important;
    width:10px !important;    
}


.btn-select:hover span.bs-caret
{
    background-color: #FDE481;   
}

但这不起作用。是否有相同的解决方法？

这是一个不起作用的Demo。

Answer 1

引导程序caret是使用border构建的。设置背景颜色无助于原因。您可以使用伪元素:before或:after来获得所需的效果。工作代码http://www.bootply.com/O0W1KwLQSr