如何为必填的Select2组件设置边框颜色并根据选中状态切换？

Select2会将原生<select>元素隐藏，生成自定义DOM结构，因此针对原生select的CSS样式无法直接作用到Select2的视觉组件上。需要针对Select2生成的容器元素编写样式，并结合原生select的状态实现需求：

1. 修改CSS样式 #

保留原input/textarea的样式规则，添加针对Select2的样式：

/* 原生input/textarea样式保留 */
input:required.form-control:focus, textarea:required.form-control:focus{
    border-color: #FF0000!important;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(255, 0, 0, 0.6) !important;
}
input:required:invalid, textarea:required:invalid {border: 1px solid darkorange!important;}
input:required:valid, textarea:required:valid { border: 1px solid black!important; }

/* Select2必填未选择状态 */
select:required:invalid + .select2-container .select2-selection {
  border: 1px solid darkorange !important;
}

/* Select2选中有效选项状态 */
select:required:valid + .select2-container .select2-selection {
  border: 1px solid black !important;
}

/* Select2聚焦状态 */
select:required:focus + .select2-container .select2-selection,
.select2-container--focus .select2-selection {
  border-color: #FF0000 !important;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(255, 0, 0, 0.6) !important;
}

2. 完善JavaScript代码 #

监听Select2的选择事件，确保原生select的状态同步更新，让CSS规则正确触发：

<select id="select" required>
  <option value="">Select</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
  <option value="4">Option 4</option>
</select>

<script>
  $(document).ready(function() {
    $('#select').select2();
    
    // 同步Select2选择操作与原生select状态
    $('#select').on('select2:select select2:unselect', function() {
      $(this).trigger('change');
    });
  });
</script>

原理说明 #

• Select2会在原生select相邻位置生成.select2-container容器，通过CSS相邻选择器+关联原生select的:required/:invalid/:valid状态，为Select2的视觉组件.select2-selection设置样式。
• 监听Select2的选择事件并触发原生select的change事件，确保浏览器更新原生select的有效性状态，让CSS规则正确匹配。

内容的提问来源于stack exchange，提问作者Vito Andolini