Applying bootstrap has-error styling to a select2 element

Question

I've got a select2 select menu.

Stripped version for example:

<div class="form-group has-error">
    <select name="description_id" class="select2">
        <!-- <options> -->

</div>

Applying the has-error to the text-inputs will display a red border around the input. This does not work for a select2 menu. What am I missing?

I'm using bootstrap3 and the latest select2.

Answer 1

The solution on the page you have posted, is for an older version of select2. For the latest version, use this CSS code here:

.has-error .select2-selection {
    border-color: rgb(185, 74, 72) !important;
}

Now with this code and using the has-error class, you can get the proper reddish error color:

<div class="form-group has-error">
 <select name="description_id" class="select2">
  <option>One</option>
  <option>Two</option>
  <option>Three</option>
  <option>Four</option>
 </select>
</div>

jsFiddle example: https://jsfiddle.net/k9phxgnd/1/