Bootstrap select2 error styling

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:

https://select2.github.io/

I've read this page and tried the solution but it doesn't work:

https://xcellerant.net/2013/12/05/adding-bootstrap-error-styling-to-a-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/