MacOS各浏览器中appearance: none失效，自定义下拉样式求助

MacOS下的浏览器（Safari、Chrome等）会将<select>的下拉列表渲染为系统原生控件，单纯通过appearance: none只能隐藏原生下拉箭头，无法覆盖下拉面板及选项的默认样式——这也是你无法自定义选项旁颜色圆形标识的核心原因。

方案一：用自定义组件模拟下拉菜单（推荐） #

完全脱离原生<select>的限制，用HTML元素模拟结构，实现100%可控的样式：

HTML结构

<div class="custom-select">
  <div class="select-trigger">选择颜色</div>
  <ul class="select-options">
    <li class="option-item" data-value="red">
      <span class="color-dot" style="background-color: #ff4444;"></span>红色
    </li>
    <li class="option-item" data-value="blue">
      <span class="color-dot" style="background-color: #33b5e5;"></span>蓝色
    </li>
    <li class="option-item" data-value="green">
      <span class="color-dot" style="background-color: #99cc00;"></span>绿色
    </li>
  </ul>
</div>

CSS样式

.custom-select {
  position: relative;
  width: 220px;
  font-size: 16px;
}

.select-trigger {
  padding: 10px 12px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  background-color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.select-trigger::after {
  content: '▼';
  font-size: 12px;
  color: #666;
  margin-left: 8px;
}

.select-options {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  background-color: #fff;
  list-style: none;
  padding: 4px 0;
  margin: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  display: none;
  z-index: 100;
}

.custom-select.open .select-options {
  display: block;
}

.option-item {
  padding: 8px 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
}

.option-item:hover {
  background-color: #f5f5f5;
}

.color-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.1);
}

JavaScript交互

const customSelect = document.querySelector('.custom-select');
const trigger = customSelect.querySelector('.select-trigger');
const options = customSelect.querySelectorAll('.option-item');

// 展开/收起下拉列表
trigger.addEventListener('click', () => {
  customSelect.classList.toggle('open');
});

// 选择选项
options.forEach(item => {
  item.addEventListener('click', () => {
    const text = item.textContent.trim();
    const value = item.dataset.value;
    trigger.textContent = text;
    // 这里可以添加选中后的逻辑，比如触发自定义事件或赋值给隐藏的input
    customSelect.classList.remove('open');
  });
});

// 点击外部关闭下拉
document.addEventListener('click', (e) => {
  if (!customSelect.contains(e.target)) {
    customSelect.classList.remove('open');
  }
});

方案二：原生select的妥协方案（仅能部分自定义） #

如果坚持使用原生<select>，只能实现有限的自定义——无法单独设置每个选项的颜色标识，只能通过特殊字符模拟圆点，且下拉面板仍为系统样式：

HTML

<select class="native-custom-select">
  <option value="red">● 红色</option>
  <option value="blue">● 蓝色</option>
  <option value="green">● 绿色</option>
</select>

CSS

.native-custom-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 220px;
  padding: 10px 30px 10px 10px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  background-color: #fff;
  font-size: 16px;
  cursor: pointer;
  position: relative;
}

/* 自定义下拉箭头 */
.native-custom-select::after {
  content: '▼';
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #666;
  pointer-events: none;
}

/* 注意：MacOS上无法单独设置option的颜色，只能统一修改 */
.native-custom-select option {
  color: #333;
}

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