ブートストラップのselectpickerがブートストラップ "has-error"クラスで動作しない

Question

ブートストラップのselectpickerとブートストラップの "has-error"クラスに問題があります。 selectタグにselectpickerを持たない "has-error"クラスがある場合、赤い枠線がその周りに表示されます。私がselectpickerを追加すると、そうではありません。私は "has-error"がブートストラップのselectpickerでselectタグの周りに赤い枠線を表示するようにすることができますか？

jsfiddle：http://jsfiddle.net/mfrup5bL/149/

コード：

<div class="form-group has-error"> 
    <select class="form-control"> 
     <option>Option 1</option> 
     <option>Option 2</option> 
     <option>Option 3</option> 
    </select> 
</div> 

// include next line to see that red border dissapears 
// $('select').selectpicker(); 

Answer 1

あなたはこのスタイルを追加することができます。

.has-error .form-control > .selectpicker { 
    border-color: #a94442; 
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075); 
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075); 
} 

デモhereを参照してください。

Answer 2

あなたはCSSのオーバーライドを避けるために... selectpickerによって作成された要素に

button.btn.dropdown-toggle.selectpicker.btn-default { 
    border-color: rgb(169, 68, 66); 
} 

Answer 3

を色を追加することができ、必要なスタイルを提供し、最新バージョンへのブートストラップ・セレクト更新できます。