如何让Tom Select匹配Bootstrap 5 btn-outline-secondary按钮样式？

Tom Select会生成独立的DOM结构，直接添加Bootstrap的btn-outline-secondary类无法完全覆盖内部元素样式，需要通过自定义CSS匹配Bootstrap的颜色规范：

1. 添加自定义样式 #

将以下代码放到你的样式文件中（确保在Tom Select和Bootstrap CSS之后加载）：

/* 映射Bootstrap btn-outline-secondary的颜色参数 */
.tom-select.btn-outline-secondary {
  --ts-text: #6c757d;
  --ts-border: #6c757d;
  --ts-hover-bg: #6c757d;
  --ts-hover-text: #fff;
  --ts-focus-shadow: rgba(108, 117, 125, 0.5);
}

/* 主控制区域样式 */
.tom-select.btn-outline-secondary .ts-control {
  border-color: var(--ts-border);
  color: var(--ts-text);
  background-color: transparent;
  padding: 0.375rem 0.75rem; /* 匹配Bootstrap按钮内边距 */
}

/* 悬停状态 */
.tom-select.btn-outline-secondary:hover .ts-control {
  background-color: var(--ts-hover-bg);
  border-color: var(--ts-border);
  color: var(--ts-hover-text);
}

.tom-select.btn-outline-secondary:hover .ts-dropdown-toggle {
  color: var(--ts-hover-text);
}

/* 聚焦状态 */
.tom-select.btn-outline-secondary:focus-within .ts-control {
  border-color: var(--ts-border);
  box-shadow: 0 0 0 0.25rem var(--ts-focus-shadow);
}

/* 下拉按钮样式 */
.tom-select.btn-outline-secondary .ts-dropdown-toggle {
  color: var(--ts-text);
}

2. 绑定样式类到Tom Select容器 #

初始化Tom Select时，将btn-outline-secondary类添加到生成的容器：

new TomSelect('#your-select-element-id', {
  containerClass: 'btn-outline-secondary',
  // 其他配置项（如placeholder、maxItems等）
});

或者直接给HTML中的<select>标签添加class="btn-outline-secondary"，Tom Select会自动将类继承到容器上。

完成以上步骤后，Tom Select的边框、文字颜色就会和Bootstrap 5原生btn-outline-secondary样式的下拉框完全一致。

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