使用 select2 时保持输入验证 CSS 类

Question

在我的表单上有一个下拉列表，我在其中使用Select2。

这是我的剃须刀：

<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>

我正在使用 jQuery Validation 进行客户端验证。

如果我在没有选择值的情况下离开下拉列表，那么我会收到一个验证错误，但不是相应的 css 类，它用红色勾勒出框。特别是input-validation-error。

这是我得到的：

如您所见，City 获得红色轮廓，而使用 Select2 的 State 没有，即使两者都获得验证消息。

当我从 Razor 代码中检查呈现的 HTML 时，我在下拉列表中看到了这个：

<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>

现在得到了input-validation-error 类，但显然没有显示红色轮廓。

select2 生成这个：

<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>

更新

在这里使用zgood的答案是结果：

更新 2

更改 zgood 的答案我可以使用这个：

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

这导致了：

但现在红色轮廓与文本框的形式不匹配。

Answer 1

我认为这种风格可能会对你有所帮助：

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

当它的前一个兄弟（原始select）在验证期间获得类input-validation-error时，这将选择select2下拉列表的呈现区域。

他们的关键是preceding element selector ~

看到这个fiddle

更新

实际上，定位.select2-selection 而不是.select2-selection__rendered 可能会更好。尝试将样式更新为：

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