如何获取浏览器默认悬停颜色？

附上不同浏览器原生select悬停效果：
Firefox：

Chrome：

由于浏览器默认样式属于内部实现，没有统一的API直接获取，但可以通过以下几种方式让自定义select匹配原生悬停颜色：

1. 通过隐藏原生元素提取颜色 #

创建一个隐藏的原生<select>和<option>，模拟悬停状态后用getComputedStyle获取计算后的背景色：

// 创建隐藏的原生控件
const hiddenSelect = document.createElement('select');
const option = document.createElement('option');
hiddenSelect.appendChild(option);
hiddenSelect.style.cssText = 'position:absolute; opacity:0; pointer-events:none;';
document.body.appendChild(hiddenSelect);

// 触发悬停样式
const style = document.createElement('style');
style.textContent = '.hover-target:hover {}'; // 强制触发浏览器原生hover规则
document.head.appendChild(style);
option.classList.add('hover-target');

// 获取悬停状态下的样式
const hoverStyle = getComputedStyle(option, ':hover');
const hoverBgColor = hoverStyle.backgroundColor;
console.log('原生悬停背景色:', hoverBgColor);

// 清理临时元素
document.body.removeChild(hiddenSelect);
document.head.removeChild(style);

注：部分浏览器需要实际触发鼠标事件（如option.dispatchEvent(new MouseEvent('mouseenter'))）才能正确获取:hover样式。

2. 复用原生控件样式 #

通过CSS的appearance属性让自定义元素继承原生select的样式：

.custom-select {
  -webkit-appearance: menulist-button;
  -moz-appearance: menulist-button;
  appearance: menulist-button;
}

这种方式能让自定义元素快速贴近原生样式，但细节控制有限，适合需求不精细的场景。

3. 浏览器针对性适配 #

通过User Agent判断浏览器，直接设置对应默认颜色：

const isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
const isFirefox = /Firefox/.test(navigator.userAgent);

let hoverColor = '';
if (isChrome) {
  hoverColor = '#e3f2fd'; // Chrome原生option悬停蓝
} else if (isFirefox) {
  hoverColor = '#e6e6e6'; // Firefox原生option悬停灰
}

// 应用到自定义选项
document.querySelectorAll('.custom-option').forEach(opt => {
  opt.style.backgroundColor = hoverColor;
});

缺点是需要维护各浏览器的颜色值，版本更新可能导致颜色变化。

4. CSS特性检测适配 #

用@supports针对不同浏览器内核设置样式：

/* WebKit/Chrome 内核 */
@supports (-webkit-appearance: menulist-button) {
  .custom-option:hover {
    background-color: #e3f2fd;
  }
}

/* Firefox 内核 */
@supports (-moz-appearance: menulist-button) {
  .custom-option:hover {
    background-color: #e6e6e6;
  }
}

纯CSS实现，无需JS，但同样需要提前知晓各浏览器的默认颜色。

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