如何修改select元素hover选项的背景色与文字颜色：蓝背景改透明、文字设红

这个问题我碰到好多次了，原生<select>的<option>悬停样式确实有点棘手——因为不同浏览器把它当成原生系统控件，默认样式的优先级很高，普通的:hover伪类经常不生效。不过别担心，我给你两种靠谱的办法，根据你的需求选就行：

1. 快速方案：针对现代WebKit内核浏览器 #

如果你只需要兼容Chrome、Edge、Safari这类WebKit/Blink内核的浏览器，直接用浏览器提供的私有伪类就能搞定，代码超简单：

/* 仅支持WebKit/Blink内核浏览器 */
select::-webkit-list-box-option:hover {
  background-color: transparent; /* 透明背景 */
  color: red; /* 红色文字 */
}

这个写法直接命中下拉列表里的选项，完美实现你要的效果，缺点是Firefox和旧版IE不支持，适合只面向现代浏览器的项目。

2. 跨浏览器兼容方案：自定义Select组件 #

如果需要覆盖所有浏览器（包括Firefox、IE），最稳妥的方式是用HTML/CSS/JS模拟一个自定义select组件，这样样式完全由你掌控：

第一步：HTML结构 #

先搭出模拟的select框架：

<div class="custom-select">
  <!-- 触发选择的按钮 -->
  <div class="select-trigger">请选择选项</div>
  <!-- 下拉选项列表 -->
  <ul class="options-list">
    <li class="option-item">选项A</li>
    <li class="option-item">选项B</li>
    <li class="option-item">选项C</li>
  </ul>
</div>

第二步：CSS样式 #

给组件加上基础样式和hover效果，完全按照你的需求来：

.custom-select {
  position: relative;
  width: 220px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

.select-trigger {
  padding: 10px 15px;
  cursor: pointer;
  background-color: #fff;
}

.options-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid #ddd;
  border-top: none;
  border-radius: 0 0 4px 4px;
  background-color: #fff;
  display: none; /* 默认隐藏下拉列表 */
}

/* 展开下拉列表的状态 */
.custom-select.active .options-list {
  display: block;
}

.option-item {
  padding: 10px 15px;
  cursor: pointer;
}

/* 这里就是你要的hover效果 */
.option-item:hover {
  background-color: transparent;
  color: red;
}

第三步：JS交互逻辑 #

加一点简单的JS来控制下拉列表的展开收起，以及选项的选中：

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

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

// 点击选项后更新触发器文字并收起下拉
options.forEach(option => {
  option.addEventListener('click', () => {
    trigger.textContent = option.textContent;
    customSelect.classList.remove('active');
  });
});

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

这个方案的好处是完全跨浏览器，样式想怎么改就怎么改，甚至可以加过渡动画、自定义箭头之类的，唯一的小代价是写几行JS，但逻辑非常简单，新手也能看懂。

最后提醒 #

• 如果项目对兼容性要求不高，优先用第一种快速方案，省事儿；
• 要是需要覆盖全浏览器，自定义组件是不二之选，灵活性拉满。

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