如何修改<select multiple>中选中选项的颜色？

嘿，我懂你想自定义多选下拉框选中项样式的需求——原生的蓝色高亮确实有点单调，咱们不用第三方库，用纯CSS或者原生JS就能搞定，下面给你两种实用方案：

方案一：纯CSS实现（推荐） #

利用CSS的:checked伪类可以直接定位选中的<option>元素，设置自定义的文字色和背景色，完全不需要JS介入：

/* 针对多选select的选中项设置样式 */
select[multiple] option:checked {
  color: #ffffff; /* 选中文字为白色 */
  background-color: #2ecc71; /* 选中背景为绿色，匹配你参考图的效果 */
}

/* 可选：移除原生控件的默认外观，让样式更可控（部分浏览器需要） */
select[multiple] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 1px solid #ddd;
  padding: 8px;
  min-height: 150px;
}

说明 #

• 大部分现代浏览器（Chrome、Firefox、Edge）都支持:checked伪类作用于<option>元素，直接生效。
• 如果移除了原生外观，记得给<select>补充基础样式（比如边框、内边距、高度），避免样式错乱。

方案二：原生JS实现（更灵活） #

如果需要更复杂的交互逻辑（比如选中时添加动画、根据条件动态改样式），可以用原生JS监听选中变化，通过添加/移除CSS类来控制样式：

首先定义样式类：

.selected-option {
  color: #ffffff;
  background-color: #2ecc71;
}

然后编写原生JS代码：

// 获取目标多选select元素
const multiSelect = document.querySelector('select[multiple]');

// 初始化页面时，给已选中的选项添加样式
multiSelect.querySelectorAll('option:checked').forEach(option => {
  option.classList.add('selected-option');
});

// 监听选中状态变化事件
multiSelect.addEventListener('change', function() {
  // 遍历所有选项，根据选中状态切换样式类
  this.querySelectorAll('option').forEach(option => {
    option.classList.toggle('selected-option', option.selected);
  });
});

说明 #

• classList.toggle方法可以简化逻辑：第二个参数为true时添加类，false时移除类。
• 这种方式可以轻松扩展，比如添加选中时的过渡动画，或者根据选项的属性值设置不同的样式。

小提示 #

有些浏览器对原生<select>的样式限制比较严格（比如鼠标点击选中时的临时高亮），如果CSS无法完全覆盖，可以结合JS监听mousedown事件来临时调整样式，不过一般来说上面两种方案已经能满足大部分需求啦。

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