如何为单个Select2下拉选项设置CSS样式？

安全阿岳

2026-7-5

解决Select2单个下拉选项样式设置问题

问题根源

Select2会将原生<select>和<option>元素替换为自定义HTML结构，原生元素会被隐藏。所以直接给原生<option>加style、包裹<span>或用JS操作原生元素，都不会影响页面实际显示的内容。

解决方法

方法1：用Select2模板渲染函数（推荐）

通过Select2提供的templateResult和templateSelection配置项，自定义选项渲染逻辑，给特定选项添加样式：

$('#js-location-picker').select2({
  templateResult: function(option) {
    // 处理占位符等无ID的情况
    if (!option.id) return option.text;
    
    // 匹配"Select ALL Locations"选项（value为"all"）
    if (option.value === 'all') {
      return $('<span style="color: red; font-weight: bold;">' + option.text + '</span>');
    }
    
    return option.text;
  },
  templateSelection: function(option) {
    // 处理选中后的标签样式
    if (option.value === 'all') {
      return $('<span style="color: red;">' + option.text + '</span>');
    }
    
    return option.text;
  },
  // 保留原有配置
  placeholder: "Locations",
  multiple: true
});

方法2：通过CSS定位Select2生成的元素

先给原生<option>添加标识类：

<option id="select-all-style" value="all" class="special-all-option">Select ALL Locations</option>

再编写CSS覆盖默认样式：

/* 下拉列表中的特殊选项（按索引定位，"Select ALL"是第一个选项） */
.select2-results__option[data-option-array-index="0"] {
  color: red !important;
  font-weight: bold;
}

/* 或按文本匹配（注意大小写敏感） */
.select2-results__option:contains("Select ALL Locations") {
  color: red !important;
  font-weight: bold;
}

/* 选中后的标签样式 */
.select2-selection__choice:contains("Select ALL Locations") {
  background-color: #ffebee !important;
  color: #c62828 !important;
}