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