如何使用CSS或JavaScript修改下拉菜单选中元素的高亮颜色

解决方案 #

方法1：纯CSS实现（优先推荐） #

原生<select>下拉菜单的选中高亮可以直接通过CSS伪类修改，在你的样式文件中加入以下代码即可：

/* 下拉展开状态下选中项的高亮样式 */
select.product_select option:checked {
  background-color: #ccc; /* 可自行调整为你需要的灰色色值 */
  color: #000; /* 配合灰色背景调整文字颜色，保证可读性 */
}

/* 可选：修改select控件本身聚焦时的高亮样式 */
select.product_select:focus {
  outline: 2px solid #ccc;
  /* 如果需要修改控件上显示选中项的背景，可添加下行 */
  background-color: #f0f0f0;
}

如果上述代码在Safari等webkit内核浏览器中不生效，可以添加以下代码重置原生样式，需自行补充下拉箭头样式避免箭头消失：

select.product_select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* 自定义下拉箭头，使用内联svg无需引入外部资源 */
  background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding-right: 36px;
}

方法2：JavaScript方案（仅用于兼容极端旧版本浏览器） #

如果CSS方案无法满足你的兼容性要求，可以通过JS动态给选中项添加自定义类实现样式控制：

const productSelect = document.getElementById('products');
// 初始化时给默认选中项添加样式类
productSelect.querySelector('option:checked').classList.add('selected');
// 监听选项切换事件更新样式
productSelect.addEventListener('change', () => {
  productSelect.querySelectorAll('option').forEach(opt => opt.classList.remove('selected'));
  productSelect.querySelector('option:checked').classList.add('selected');
});

配套CSS代码：

select.product_select option.selected {
  background-color: #ccc;
  color: #000;
}

注意：原生<select>的样式受浏览器内核限制较大，不同浏览器的默认渲染逻辑存在差异，如果需要100%跨端一致的下拉效果，建议使用UI组件库的自定义下拉组件替代原生<select>标签。

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