Mac OSX版Microsoft Edge中select option样式失效如何解决？

在Mac OSX系统的Microsoft Edge（107.0.1418.24 arm64正式版）中，原生<select>的<option>标签自定义CSS样式失效是常见兼容性问题——这是因为Edge在Mac上会调用系统级下拉菜单控件，覆盖了自定义的文字颜色、背景色等样式，而其他浏览器对原生控件的样式限制更宽松。

以下是可行的解决办法：

1. 使用自定义下拉组件（推荐） #

彻底放弃原生<select>，用HTML元素模拟下拉菜单，完全掌控样式，所有浏览器都能生效。示例代码：

<div class="custom-select">
  <div class="select-trigger">选择颜色</div>
  <ul class="options-list">
    <li class="option red">Red</li>
    <li class="option blue">Blue</li>
  </ul>
</div>

<style>
.custom-select {
  position: relative;
  width: 150px;
}
.select-trigger {
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
  background-color: #fff;
}
.options-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  border: 1px solid #ccc;
  border-radius: 0 0 4px 4px;
  list-style: none;
  padding: 0;
  margin: 0;
  display: none;
  background-color: #fff;
}
.custom-select.active .options-list {
  display: block;
}
.option {
  padding: 8px 12px;
  cursor: pointer;
}
.option.red {
  color: red;
}
.option.blue {
  color: blue;
}
.option:hover {
  background-color: #f0f0f0;
}
</style>

<script>
const selectTrigger = document.querySelector('.select-trigger');
const customSelect = document.querySelector('.custom-select');
const options = document.querySelectorAll('.option');

selectTrigger.addEventListener('click', () => {
  customSelect.classList.toggle('active');
});

options.forEach(option => {
  option.addEventListener('click', () => {
    selectTrigger.textContent = option.textContent;
    customSelect.classList.remove('active');
  });
});

// 点击页面其他区域关闭下拉
document.addEventListener('click', (e) => {
  if (!customSelect.contains(e.target)) {
    customSelect.classList.remove('active');
  }
});
</script>

2. 尝试原生select的CSS hack（效果有限） #

如果必须保留原生<select>，可以尝试添加-webkit-appearance: none;禁用系统默认样式，再自定义样式，但这种方法在Mac Edge中不一定能完全生效：

<select style="-webkit-appearance: none; padding: 8px; border: 1px solid #ccc; border-radius: 4px;">
  <option style="color: red;">Red</option>
  <option style="color: blue;">Blue</option>
</select>

<style>
/* 全局设置option样式，尝试覆盖系统样式 */
select option {
  color: red !important;
}
select option:nth-child(2) {
  color: blue !important;
}
</style>

3. 升级Edge浏览器 #

检查并升级Edge到最新正式版，后续版本可能修复了该兼容性问题。

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