Bootstrap select2错误样式

Question

我有一个select2选择菜单。

剥离版本例如：

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

// <options>

</div>

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

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

https://select2.github.io/

我已经阅读了这个页面并尝试了解决方案，但它不起作用：

https://xcellerant.net/2013/12/05/adding-bootstrap-error-styling-to-a-select2/

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

Answer 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>元素，它是<span>元素之后的嵌套<select>元素之一。该特定范围包含.select2-selection类。