如何移除多选select控件选中选项的蓝色背景？

嘿，我太懂你遇到的这个坑了——浏览器对原生<select multiple>的样式控制真的有不少奇葩限制，很多常规CSS伪类和JS事件在这里都不好使，咱们一步步拆解解决：

为什么你之前的尝试没效果？ #

先给你捋清楚原因：

• :checked伪类其实是有效的，但Chrome、Edge这类WebKit内核浏览器（尤其是Windows系统下）会用高优先级的原生主题样式覆盖它，导致你的CSS不生效。
• :focus、:active是作用在整个<select>控件上的，不是单个<option>，所以改不了选中项的背景。
• jQuery的click事件在<option>上触发不了，因为浏览器会拦截原生select内部的点击事件，得监听select的change事件才行。
• ::selection伪类针对的是文本选中状态，和select选项的选中状态不是一回事，所以完全没用。

可行的解决方案 #

方案1：用CSS强制覆盖原生样式（最简单） #

针对不同浏览器的特性，加上!important来强制覆盖原生样式，大部分场景下能生效：

/* 针对WebKit内核浏览器（Chrome、Edge） */
.test option:checked {
  background-color: #ddd !important;
  color: #000 !important; /* 记得改文字颜色，不然可能看不清 */
}

/* 火狐浏览器不需要!important也能生效 */
@-moz-document url-prefix() {
  .test option:checked {
    background-color: #ddd;
    color: #000;
  }
}

注意：如果用户系统用了自定义主题，这个方法可能还是会失效，毕竟浏览器原生样式的优先级实在太高。

方案2：通过JS监听Change事件动态加类 #

既然直接改CSS不稳定，咱们可以借助JS给选中的选项手动加类：
首先写CSS类：

.test option.selected {
  background-color: #ddd !important;
  color: #000 !important;
}

然后用jQuery监听select的change事件：

$('.test').on('change', function() {
  // 先移除所有选项的选中类
  $(this).find('option').removeClass('selected');
  // 给选中的选项加类
  $(this).find('option:checked').addClass('selected');
});

这个方法比纯CSS靠谱一些，但还是逃不开浏览器原生样式的限制，极端情况下可能还是不生效。

方案3：自定义多选组件（最灵活可靠） #

如果上面两种方法都满足不了需求，最好的办法是抛弃原生select，用HTML元素模拟一个多选控件，这样样式和交互完全由你掌控：

HTML结构

<div class="custom-multi-select">
  <ul class="options-list">
    <li data-value="volvo">Volvo</li>
    <li data-value="saab">Saab</li>
    <li data-value="opel">Opel</li>
    <li data-value="audi">Audi</li>
  </ul>
  <!-- 用隐藏输入框存储选中值，提交表单时能用 -->
  <input type="hidden" name="selected-cars" class="selected-values">
</div>

CSS样式

.custom-multi-select {
  border: 1px solid #ddd;
  border-radius: 4px;
  max-height: 200px;
  overflow-y: auto;
  padding: 4px;
  width: 200px;
}

.options-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.options-list li {
  padding: 8px 10px;
  cursor: pointer;
  border-radius: 2px;
}

.options-list li:hover {
  background-color: #ccc;
}

.options-list li.selected {
  background-color: #ddd;
  /* 还能加个选中标识，比如左边的小对勾 */
  position: relative;
}

.options-list li.selected::before {
  content: "✓";
  position: absolute;
  left: 5px;
}

JS交互逻辑

$('.options-list li').on('click', function() {
  // 切换选中状态
  $(this).toggleClass('selected');
  
  // 同步选中值到隐藏输入框，方便表单提交
  let selectedValues = $('.options-list li.selected').map(function() {
    return $(this).data('value');
  }).get();
  
  $('.selected-values').val(selectedValues.join(','));
});

这个方法完全不受浏览器限制，你想把选中项改成任何颜色、任何样式都可以，还能自定义交互效果（比如批量选择、搜索过滤等）。

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