Keep input validation CSS class when using select2

Question

On my form I have a dropdownlist where I am using Select2.

Here is my razor:

<div class="form-group">
    @Html.LabelFor(model => model.StateId, htmlAttributes: new { @class = "control-label col-md-4" })
    <div class="col-md-8">
        @Html.DropDownListFor(model => model.StateId, ViewBag.StateName as SelectList, "-- Select State --", new { id = "CreateState", @class = "form-control" })
        @Html.ValidationMessageFor(model => model.StateId, "", new { @class = "text-danger" })
    </div>
</div>

I am using jQuery Validation for client side validation.

If I leave the dropdownlist without a selected value then I would expect a validation error, which I am recieving but not the corresponding css class that outlines the box in red.. specifically input-validation-error.

Here is what I get:

As you can see, the City gets the red outline, whereas the State which is using Select2 does not, even though both get the validation message.

When I check the rendered HTML from the Razor code I see this for the dropdownlist:

<select name="StateId" tabindex="-1" class="form-control select2-hidden-accessible input-validation-error" id="CreateState" aria-hidden="true" data-val-required="The State field is required." data-val-number="The field State must be a number." data-val="true">
<option value="">-- Select State --</option>
<option value="1">Alabama</option>
<option value="2">Alaska</option>
<option value="3">Arizona</option>
<option value="4">Arkansas</option>
<option value="5">California</option>
<option value="6">Colorado</option>
<option value="7">Connecticut</option>
<option value="8">Delaware</option>
<option value="9">Florida</option>
<option value="10">Georgia</option>
<option value="11">Hawaii</option>
<option value="12">Idaho</option>
<option value="13">Illinois</option>
<option value="14">Indiana</option>
<option value="15">Iowa</option>
<option value="16">Kansas</option>
<option value="17">Kentucky</option>
<option value="18">Louisiana</option>
<option value="19">Maine</option>
<option value="20">Maryland</option>
<option value="21">Massachusetts</option>
<option value="22">Michigan</option>
<option value="23">Minnesota</option>
<option value="24">Mississippi</option>
<option value="25">Missouri</option>
<option value="26">Montana</option>
<option value="27">Nebraska</option>
<option value="28">Nevada</option>
<option value="29">New Hampshire</option>
<option value="30">New Jersey</option>
<option value="31">New Mexico</option>
<option value="32">New York</option>
<option value="33">North Carolina</option>
<option value="34">North Dakota</option>
<option value="35">Ohio</option>
<option value="36">Oklahoma</option>
<option value="37">Oregon</option>
<option value="38">Pennsylvania</option>
<option value="39">Rhode Island</option>
<option value="40">South Carolina</option>
<option value="41">South Dakota</option>
<option value="42">Tennessee</option>
<option value="43">Texas</option>
<option value="44">Utah</option>
<option value="45">Vermont</option>
<option value="46">Virginia</option>
<option value="47">Washington</option>
<option value="48">West Virginia</option>
<option value="49">Wisconsin</option>
<option value="50">Wyoming</option>
</select>

Now that gets the input-validation-error class but obviously not showing the red outline.

The select2 generates this:

<span class="select2 select2-container select2-container--bootstrap" style="width: 280px;" dir="ltr">
    <span class="selection">
        <span tabindex="0" class="select2-selection select2-selection--single" role="combobox" aria-expanded="false" aria-haspopup="true" aria-labelledby="select2-CreateState-container">
            <span title="-- Select State --" class="select2-selection__rendered" id="select2-CreateState-container">-- Select State --</span>
            <span class="select2-selection__arrow" role="presentation"><b role="presentation"></b>
            </span>
        </span>
    </span>
    <span class="dropdown-wrapper" aria-hidden="true"></span>
</span>

UPDATE

Using zgood's answer here is the result:

UPDATE 2

Changing zgood's answer I was able to use this:

.input-validation-error ~ .select2[![enter image description here][3]][3] {
    border: 1px solid red;
}

Which resulted in this:

But now the red outline doesn't match the form of the textbox.

Answer 1

I think this style might help you:

.input-validation-error ~ .select2 .select2-selection__rendered {
  border: 1px solid red;
}

This will select the rendered area of the select2 dropdown when its previous sibling (the original select) gets the class input-validation-error during validation.

They key is the preceding element selector ~

see this fiddle

Update

It actually might be better to target the .select2-selection instead of .select2-selection__rendered. Try updating the style to this:

.input-validation-error ~ .select2 .select2-selection {
  border: 1px solid red;
}