将 bootstrap has-error 样式应用于 select2 元素答案

【问题标题】：Applying bootstrap has-error styling to a select2 element将 bootstrap has-error 样式应用于 select2 元素
【发布时间】：2017-06-18 16:34:32
【问题描述】：

我有一个select2 选择菜单。

例如剥离版本：

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

</div>

将has-error 应用于文本输入将在输入周围显示红色边框。这不适用于select2 菜单。我错过了什么？

我正在使用bootstrap3 和最新的select2。

【问题讨论】：

标签： twitter-bootstrap-3 jquery-select2 styling

【解决方案1】：

您发布的页面上的解决方案适用于旧版本的select2。对于最新版本，请在此处使用此 CSS 代码：

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

现在使用此代码并使用 has-error 类，您可以获得正确的红色错误颜色：

<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 示例：https://jsfiddle.net/k9phxgnd/1/

【讨论】：

就是这样，非常感谢，可以在12小时内奖励赏金:-)

【解决方案2】：

对于 Bootstrap 3.3 和 Select2 4.0.6，错误样式可以按如下方式应用：

css:

.has-error {border:1px solid rgb(185, 74, 72) !important;}

jquery/javascript:

$('#YourSelect2ControlID').next().find('.select2-selection').addClass('has-error');

对于 Select2 控件，包含边框样式的对象不是<select> 元素，它是<select> 元素之后的嵌套<span> 元素之一。该特定范围包含 .select2-selection 类。

【讨论】：