ホバーのブートストラップドロップダウンカスタマイズ

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は、境界線を使用して構築されています。背景色を設定しても、その原因には役立ちません。擬似要素:beforeまたは:afterを使用して、必要な効果を得ることができます。作業コードhttp://www.bootply.com/O0W1KwLQSr