如何创建自定义Select2主题并应用到自有站点？

API 探路者

2026-8-3

自定义Select2主题「mySite」的实现步骤

1. 初始化时指定自定义主题

在JS初始化代码中，将theme选项设置为你自定义的名称mySite：

$(".js-example-theme-multiple").select2({
  theme: "mySite"
});

Select2会自动为所有关联DOM元素添加前缀为select2-theme-mysite的类名，后续CSS将基于这些类编写自定义样式。

2. 编写自定义主题CSS

创建独立的CSS文件（比如select2-theme-mysite.css），按照Select2的主题命名规则覆盖默认样式。以下是核心样式示例，可根据需求调整：

/* 容器基础样式 */
.select2-theme-mysite .select2-container {
  font-size: 14px;
  border-radius: 4px;
}

/* 单选模式下的触发按钮 */
.select2-theme-mysite .select2-selection--single {
  height: 36px;
  border: 1px solid #ddd;
  background-color: #fff;
}

.select2-theme-mysite .select2-selection--single:hover {
  border-color: #999;
}

/* 下拉菜单容器 */
.select2-theme-mysite .select2-dropdown {
  border-color: #ddd;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* 下拉选项样式 */
.select2-theme-mysite .select2-results__option {
  padding: 8px 12px;
  cursor: pointer;
}

.select2-theme-mysite .select2-results__option--highlighted[aria-selected] {
  background-color: #007bff;
  color: #fff;
}

/* 多选模式下的选中标签 */
.select2-theme-mysite .select2-selection--multiple .select2-selection__choice {
  background-color: #007bff;
  color: #fff;
  border-radius: 4px;
  padding: 2px 8px;
  margin: 4px;
}

3. 确保CSS加载顺序

在页面中先加载Select2默认CSS，再加载自定义主题CSS，保证自定义样式能覆盖默认样式：

<!-- 先加载Select2默认样式 -->
<link rel="stylesheet" href="path/to/select2.css">
<!-- 再加载自定义主题样式 -->
<link rel="stylesheet" href="path/to/select2-theme-mysite.css">