如何移除Microsoft Edge中选中选项的灰色覆盖层？

问题原因 #

Edge浏览器对原生<select multiple>的选中<option>元素有内置高亮样式，其优先级高于自定义的Bootstrap badge类，导致选中后自定义样式被灰色覆盖层替换。

解决方案 #

1. 替换样式绑定方式，用自定义类替代Bootstrap badge #

修改Vue模板中的选项类绑定，避免直接给<option>应用badge类（该类针对行内元素设计，不适用于表单选项）：

<div class="input-group">
  <div
    class="input-group-prepend d-flex"
    style="
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    "
  >
    <span
      class="input-group-text"
      style="
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
      "
    >
      <img src="./assets/tag.svg" />
    </span>
  </div>
  <select
    id="tags-select"
    multiple
    class="custom-select"
    v-model="selectedTags"
  >
    <option disabled value="" selected>Filter tags...</option>
    <option
      :class="{
        'tag-option': true,
        'tag-option--selected': selectedTags.includes(tag),
        'tag-option--unselected': !selectedTags.includes(tag)
      }"
      v-for="tag in allTags"
      :key="tag"
      :value="tag"
    >
      {{ tag }}
    </option>
  </select>
</div>

2. 编写针对性CSS覆盖Edge默认样式 #

添加以下CSS规则，提高自定义样式优先级并覆盖Edge的内置选中样式：

/* 基础选项样式，模拟badge视觉效果 */
.tag-option {
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  margin: 0.125rem;
}

.tag-option--selected {
  background-color: var(--bs-primary); /* 复用Bootstrap主题变量 */
  color: #fff;
}

.tag-option--unselected {
  background-color: var(--bs-secondary); /* 复用Bootstrap主题变量 */
  color: #fff;
}

/* 针对Edge浏览器的特殊处理 */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  /* 覆盖Edge选中选项的默认背景 */
  select#tags-select option:checked.tag-option--selected {
    background-color: var(--bs-primary) !important;
    color: #fff !important;
    -ms-high-contrast-adjust: none;
  }

  /* 确保未选中选项样式生效 */
  select#tags-select option:not(:checked).tag-option--unselected {
    background-color: var(--bs-secondary) !important;
    color: #fff !important;
  }
}

3. 可选：用高特异性选择器避免!important #

如果不想使用!important，可以通过增加选择器特异性提高优先级：

select.custom-select#tags-select option:checked.tag-option--selected {
  background-color: var(--bs-primary);
  color: #fff;
}

select.custom-select#tags-select option:not(:checked).tag-option--unselected {
  background-color: var(--bs-secondary);
  color: #fff;
}

额外建议 #

如果原生下拉框的跨浏览器样式问题难以彻底解决，可考虑使用成熟的Vue多选组件：

• Bootstrap-Vue的b-form-select（支持多选，内置跨浏览器样式适配）
• Vue Select（自定义程度高，样式统一）

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