Chrome中option默认Hover颜色查询及自定义多选下拉菜单适配方案

一、手动获取固定颜色值 #

• 打开Chrome开发者工具（按F12），在控制台输入以下代码插入一个原生下拉框：

  document.body.innerHTML += '<select><option>测试选项</option></select>'
  

• 右键页面上的“测试选项”，选择「检查」，在开发者工具的「Styles」面板中，点击顶部的:hov按钮，勾选「hover」模拟悬停状态
• 查看background-color对应的数值，Chrome当前版本的默认悬停色通常是#e8f0fe，但不同版本可能有细微调整，手动获取的结果最准确

二、编程动态匹配（适配版本更新） #

如果想让自定义菜单始终自动匹配Chrome的默认样式，不会因为浏览器更新失效，可以用JS动态获取原生option的悬停样式：

1. 创建隐藏的原生select元素来获取默认样式：

// 创建隐藏的原生组件
const hiddenSelect = document.createElement('select');
const hiddenOption = document.createElement('option');
hiddenSelect.appendChild(hiddenOption);
// 设置隐藏样式，避免影响页面
hiddenSelect.style.position = 'absolute';
hiddenSelect.style.opacity = '0';
hiddenSelect.style.pointerEvents = 'none';
document.body.appendChild(hiddenSelect);

// 获取原生option的hover背景色
const hoverStyle = window.getComputedStyle(hiddenOption, ':hover');
const chromeHoverColor = hoverStyle.backgroundColor;

// 将颜色值应用到自定义菜单的选项上（假设自定义选项类为custom-dropdown-item）
document.querySelectorAll('.custom-dropdown-item').forEach(item => {
  item.addEventListener('mouseenter', () => {
    item.style.backgroundColor = chromeHoverColor;
  });
  item.addEventListener('mouseleave', () => {
    item.style.backgroundColor = ''; // 恢复原背景
  });
});

// 用完后移除隐藏元素
document.body.removeChild(hiddenSelect);

2. 也可以把颜色值存入CSS变量，方便全局使用：

// 获取颜色后存入CSS变量
document.documentElement.style.setProperty('--chrome-option-hover', chromeHoverColor);

然后在CSS中直接引用：

.custom-dropdown-item:hover {
  background-color: var(--chrome-option-hover);
}

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