How to Remove Grey Overlay on Selected Options in Microsoft Edge?

Question

I'm working on a Vue.js project where I need to style the selected options in a multi-select dropdown. The dropdown is styled using Bootstrap classes. My goal is to apply specific styles (like bg-primary for selected options and badge-secondary for unselected ones). This works fine in most browsers, but in Microsoft Edge, a grey overlay is applied to the selected options, which overrides my custom styles.

Here is a simplified version of my code:

<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="{
        'badge bg-primary me-1':
          selectedTags.includes(tag),
        'badge bg-secondary me-1': !selectedTags.includes(tag),
      }"
      v-for="tag in allTags"
      :key="tag"
      :value="tag"
    >
      {{ tag }}
    </option>
  </select>
</div>

When I select an element from the list, it is displayed in the correct color for a short time, but then quickly changes back to the gray overlay background.

Attempts to solve:

1. Created custom CSS classes to override the default styles
2. Attempted to use normalize.css to ensure consistent styling across browsers

Additional Information:

• Browser: Microsoft Edge
• Framework: Vue.js
• CSS Library: Bootstrap

Any help or suggestions would be greatly appreciated!