html - 悬停时的 Bootstrap 下拉自定义

Question

我有一个使用 bootstrap-select 制作的 bootstrap 下拉菜单。下面是相同的代码:

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

bootstrap caret 是使用 border 构建的。设置背景颜色无济于事。您可以使用伪元素 :before 或 :after 来获得您想要的效果。工作代码http://www.bootply.com/O0W1KwLQSr