如何为HTML和CSS中的option标签及下拉菜单默认选项设置悬停颜色

嘿，这个问题确实有点棘手，因为原生的 <option> 标签在绝大多数浏览器里都不支持直接用 :hover 伪类来自定义悬停样式——浏览器会强制使用自身的默认样式来渲染下拉选项的 hover 状态。不过别担心，我们有两种可行的解决思路，一起来看看：

如果一定要用原生的 <select> 和 <option>，只能做一些非常有限的样式修改，而且兼容性很差：

• 部分webkit内核浏览器（比如Chrome）支持用 ::-webkit-scrollbar 来修改下拉框的滚动条样式，但依然无法修改 <option> 的 hover 背景色。
• 你可以给默认选中的 <option> 添加 selected 属性，然后用 option:checked 来设置它的默认选中样式，但 hover 状态还是无法自定义。

示例代码：

<select>
  <option selected>默认选中项</option>
  <option>选项1</option>
  <option>选项2</option>
</select>

<style>
/* 仅修改选中项的默认样式，hover无效 */
option:checked {
  background: #e0f7fa;
  color: #00796b;
}
</style>

⚠️ 注意：这种方法无法实现hover颜色自定义，仅能调整选中项的静态样式，不推荐用于需要自定义hover的场景。

要完全实现自定义hover颜色（包括默认选中项的hover效果），最好的办法是用HTML元素模拟下拉菜单，比如用 <div>、<ul>、<li> 来构建，这样就能完全控制所有样式。

实现步骤： #

1. HTML结构：创建一个触发按钮（显示当前选中项）+ 隐藏的下拉列表（包含所有选项）
2. CSS样式：设置按钮、下拉列表的基础样式，然后给 <li> 添加 hover 效果，同时给默认选中的项单独设置样式和hover状态
3. JavaScript逻辑：处理下拉列表的展开/收起、选中项的切换、点击外部关闭下拉框

完整示例代码： #

<!-- 自定义下拉组件 -->
<div class="custom-select">
  <button class="select-trigger">默认选中项</button>
  <ul class="select-options">
    <li class="option selected">默认选中项</li>
    <li class="option">选项1</li>
    <li class="option">选项2</li>
    <li class="option">选项3</li>
  </ul>
</div>

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

.select-trigger {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: white;
  cursor: pointer;
  text-align: left;
}

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

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

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

/* 普通选项的hover样式 */
.option:hover {
  background: #f5f5f5;
  color: #333;
}

/* 默认选中项的静态样式 */
.option.selected {
  background: #e0f7fa;
  color: #00796b;
}

/* 默认选中项的hover样式 */
.option.selected:hover {
  background: #b2ebf2;
  color: #004d40;
}
</style>

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

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

// 选择选项
options.forEach(option => {
  option.addEventListener('click', () => {
    // 移除之前的选中状态
    customSelect.querySelector('.option.selected').classList.remove('selected');
    // 设置当前选项为选中状态
    option.classList.add('selected');
    // 更新触发按钮的文本
    triggerBtn.textContent = option.textContent;
    // 收起下拉列表
    customSelect.classList.remove('active');
  });
});

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

这个方案的优势在于：

• 完全自定义所有样式，包括hover状态和默认选中项的hover效果
• 兼容性好，所有主流浏览器都支持
• 可以扩展更多功能（比如搜索、多选等）

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