如何自定义Ant Design多选选择器？实现目标样式方法咨询

要实现你想要的自定义多选样式，原生<select multiple>的样式限制太多，跨浏览器难以统一定制，最好用HTML+CSS+JavaScript手动模拟一个，以下是具体实现方案：

1. 搭建基础HTML结构 #

用容器包裹搜索栏、选项列表，支持选项分组，每个选项搭配自定义复选框：

<div class="custom-multiselect">
  <!-- 头部：搜索框+选中计数 -->
  <div class="multiselect-header">
    <input type="text" class="search-input" placeholder="搜索选项..." />
    <span class="selected-count">已选 0 项</span>
  </div>
  <!-- 选项区域 -->
  <div class="multiselect-options">
    <div class="option-group">
      <div class="group-label">分组1</div>
      <label class="option-item">
        <input type="checkbox" value="opt1" />
        <span class="checkbox-custom"></span>
        <span>选项1</span>
      </label>
      <label class="option-item">
        <input type="checkbox" value="opt2" />
        <span class="checkbox-custom"></span>
        <span>选项2</span>
      </label>
    </div>
    <div class="option-group">
      <div class="group-label">分组2</div>
      <label class="option-item">
        <input type="checkbox" value="opt3" />
        <span class="checkbox-custom"></span>
        <span>选项3</span>
      </label>
      <label class="option-item">
        <input type="checkbox" value="opt4" />
        <span class="checkbox-custom"></span>
        <span>选项4</span>
      </label>
    </div>
  </div>
</div>

2. 编写CSS定制样式 #

隐藏原生复选框，自定义选中状态、分组样式、hover效果，还原目标样式的视觉表现：

.custom-multiselect {
  border: 1px solid #d1d5db;
  border-radius: 6px;
  width: 320px;
  font-family: system-ui, -apple-system, sans-serif;
}

.multiselect-header {
  padding: 8px 12px;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f9fafb;
}

.search-input {
  border: none;
  outline: none;
  width: 75%;
  font-size: 14px;
  background-color: transparent;
}

.selected-count {
  font-size: 12px;
  color: #6b7280;
}

.multiselect-options {
  max-height: 280px;
  overflow-y: auto;
}

.option-group {
  border-bottom: 1px solid #e5e7eb;
}

.group-label {
  padding: 6px 12px;
  font-weight: 600;
  font-size: 13px;
  color: #374151;
  background-color: #f3f4f6;
}

.option-item {
  display: flex;
  align-items: center;
  padding: 7px 12px;
  cursor: pointer;
  font-size: 14px;
  color: #111827;
}

.option-item:hover {
  background-color: #f3f4f6;
}

/* 隐藏原生复选框 */
.option-item input[type="checkbox"] {
  position: absolute;
  opacity: 0;
}

/* 自定义复选框样式 */
.checkbox-custom {
  width: 16px;
  height: 16px;
  border: 1px solid #d1d5db;
  border-radius: 3px;
  margin-right: 8px;
  display: inline-block;
  vertical-align: middle;
  position: relative;
}

/* 选中状态的复选框样式 */
.option-item input[type="checkbox"]:checked ~ .checkbox-custom {
  background-color: #2563eb;
  border-color: #2563eb;
}

.option-item input[type="checkbox"]:checked ~ .checkbox-custom::after {
  content: "✓";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 12px;
  font-weight: bold;
}

3. 添加JavaScript交互 #

实现搜索过滤、选中计数、获取选中值的核心功能：

const multiselect = document.querySelector('.custom-multiselect');
const searchInput = multiselect.querySelector('.search-input');
const optionItems = multiselect.querySelectorAll('.option-item');
const selectedCount = multiselect.querySelector('.selected-count');

// 搜索过滤选项
searchInput.addEventListener('input', (e) => {
  const keyword = e.target.value.toLowerCase();
  optionItems.forEach(item => {
    const optionText = item.querySelector('span:last-child').textContent.toLowerCase();
    item.style.display = optionText.includes(keyword) ? 'flex' : 'none';
  });
});

// 更新选中项计数
optionItems.forEach(item => {
  const checkbox = item.querySelector('input[type="checkbox"]');
  checkbox.addEventListener('change', updateSelectedCount);
});

function updateSelectedCount() {
  const checkedBoxes = multiselect.querySelectorAll('input[type="checkbox"]:checked');
  selectedCount.textContent = `已选 ${checkedBoxes.length} 项`;
}

// 获取选中值的工具函数
function getSelectedMultiselectValues() {
  const checkedBoxes = multiselect.querySelectorAll('input[type="checkbox"]:checked');
  return Array.from(checkedBoxes).map(box => box.value);
}

如果需要下拉展开/收起的效果，可以给.multiselect-header添加点击事件，切换.multiselect-options的display属性（比如默认none，点击后设为block），再配合CSS过渡动画优化体验。

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