如何修改select下拉选单选项的hover颜色为#f2f2f2？

原生<option>的hover样式无法通过CSS直接修改，本质是浏览器对原生下拉控件的样式做了封装，Chrome、Edge等多数现代浏览器不允许自定义option的hover交互状态，仅Firefox支持部分样式调整。以下是两种可行方案：

方案1：自定义下拉组件（推荐，完全可控） #

用HTML+CSS+JS模拟下拉菜单，彻底摆脱浏览器原生样式限制，实现你需要的hover颜色效果。

示例代码 #

HTML

<!-- 自定义下拉容器 -->
<div class="custom-select">
  <div class="select-trigger" tabindex="0">
    <span class="selected-option">选择选项</span>
    <span class="arrow">▼</span>
  </div>
  <ul class="options-list">
    <li class="option" data-value="1">选项1</li>
    <li class="option" data-value="2">选项2</li>
    <li class="option" data-value="3">选项3</li>
  </ul>
</div>
<!-- 隐藏原生select用于表单提交（需要提交表单时保留） -->
<select class="hidden-select" name="my-select">
  <option value="1">选项1</option>
  <option value="2">选项2</option>
  <option value="3">选项3</option>
</select>

CSS

.custom-select {
  position: relative;
  width: 200px;
}

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

/* 自定义focus样式 */
.select-trigger:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(0,123,255,0.25);
}

.options-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  border: 1px solid #ccc;
  border-top: none;
  border-radius: 0 0 4px 4px;
  background: #fff;
  list-style: none;
  padding: 0;
  margin: 0;
  display: none;
  max-height: 200px;
  overflow-y: auto;
}

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

.option {
  padding: 8px 12px;
  cursor: pointer;
}

/* 设置你需要的hover颜色 */
.option:hover {
  background-color: #f2f2f2;
}

.hidden-select {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

JS

const customSelect = document.querySelector('.custom-select');
const trigger = customSelect.querySelector('.select-trigger');
const options = customSelect.querySelectorAll('.option');
const hiddenSelect = document.querySelector('.hidden-select');
const selectedText = customSelect.querySelector('.selected-option');

// 点击触发器展开/收起下拉
trigger.addEventListener('click', () => {
  customSelect.classList.toggle('open');
});

// 选择选项时更新显示文本和原生select值
options.forEach(option => {
  option.addEventListener('click', () => {
    selectedText.textContent = option.textContent;
    hiddenSelect.value = option.dataset.value;
    customSelect.classList.remove('open');
  });
});

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

// 键盘导航（可选，优化 accessibility）
trigger.addEventListener('keydown', (e) => {
  const isOpen = customSelect.classList.contains('open');
  if (e.key === 'ArrowDown' && !isOpen) customSelect.classList.add('open');
  if (e.key === 'Escape' && isOpen) customSelect.classList.remove('open');
});

方案2：原生Select折中方案（仅Firefox生效） #

如果必须使用原生select，只有Firefox支持修改部分样式，但hover状态依然无法自定义，只能修改选中状态的颜色：

/* Firefox下修改选项默认背景 */
select option {
  background-color: #fff;
}

/* Firefox下选中选项的背景色 */
select option:checked {
  background-color: #f2f2f2;
}

Chrome、Edge等webkit内核浏览器完全不支持自定义option的交互样式，该方案局限性很大。

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