Im having trouble with bootstrap selectpicker and bootstraps "has-error" class. If an select tag has "has-error" class without selectpicker then a red border is niceley displayed around it. When i add the selectpicker then it is not. What can i do so that "has-error" will display a red border around select tag with bootstrap selectpicker?

jsfiddle: /

code:

<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();

Im having trouble with bootstrap selectpicker and bootstraps "has-error" class. If an select tag has "has-error" class without selectpicker then a red border is niceley displayed around it. When i add the selectpicker then it is not. What can i do so that "has-error" will display a red border around select tag with bootstrap selectpicker?

jsfiddle: http://jsfiddle/mfrup5bL/149/

code:

<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();

• javascript
• jquery
• html
• css
• twitter-bootstrap

3 Answers 3

You can add this style:

.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);
}

See a demo here.

You could add the color to the element that is created by the selectpicker...

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

To avoid CSS overriding, you could update bootstrap-select to the latest version which provides the required styling.