如何跨浏览器动态获取复选框与单选框的默认背景色？

好问题！刚好我之前研究过原生控件样式的获取方法，确实可以通过JavaScript动态拿到这些浏览器默认的样式值，也可以用CSS做静态适配，下面给你详细拆解：

一、JavaScript动态获取（最可靠） #

这种方法的核心是创建一个临时的原生控件，插入到DOM中（确保浏览器能计算它的真实样式），然后用window.getComputedStyle()获取选中状态下的背景色，最后移除临时元素。

示例代码（复选框） #

function getCheckedCheckboxBgColor() {
  // 创建临时复选框
  const tempCheckbox = document.createElement('input');
  tempCheckbox.type = 'checkbox';
  tempCheckbox.checked = true; // 设置为选中状态
  // 隐藏元素，避免干扰页面
  tempCheckbox.style.cssText = 'position: absolute; opacity: 0; pointer-events: none;';
  
  // 插入到DOM中
  document.body.appendChild(tempCheckbox);
  
  // 获取计算后的样式
  const computedStyle = window.getComputedStyle(tempCheckbox);
  const bgColor = computedStyle.backgroundColor;
  
  // 清理临时元素
  document.body.removeChild(tempCheckbox);
  
  return bgColor;
}

// 调用测试
console.log('当前浏览器复选框选中背景色：', getCheckedCheckboxBgColor());

单选框的适配 #

只需要把tempCheckbox.type改成'radio'即可，逻辑完全一致：

function getCheckedRadioBgColor() {
  const tempRadio = document.createElement('input');
  tempRadio.type = 'radio';
  tempRadio.checked = true;
  tempRadio.style.cssText = 'position: absolute; opacity: 0; pointer-events: none;';
  
  document.body.appendChild(tempRadio);
  const bgColor = window.getComputedStyle(tempRadio).backgroundColor;
  document.body.removeChild(tempRadio);
  
  return bgColor;
}

注意事项 #

• 必须将临时元素插入DOM：有些浏览器只有当元素处于DOM树中时，才会正确计算原生控件的默认样式。
• 系统差异：你提到的颜色值是Windows系统下的结果，Mac/Linux等系统的浏览器默认样式会不同，这个方法会自动获取当前系统下的真实值。

二、CSS静态适配（预设值，非动态） #

如果不需要动态获取，只是想针对不同浏览器预设样式，可以利用浏览器特性检测（@supports）来区分，但这种方法依赖你已知的预设值，无法自动跟随浏览器样式更新：

:root {
  --win-chrome-checkbox-bg: rgb(0,92,200);
  --win-chrome-radio-bg: rgb(0,117,255);
  --win-firefox-checkbox-radio-bg: rgb(0,96,223);
}

/* Webkit内核浏览器（Chrome、Edge等） */
@supports (-webkit-appearance: none) {
  input[type=checkbox]:checked {
    background-color: var(--win-chrome-checkbox-bg);
  }
  input[type=radio]:checked {
    background-color: var(--win-chrome-radio-bg);
  }
}

/* Firefox浏览器 */
@supports (-moz-appearance: none) {
  input[type=checkbox]:checked,
  input[type=radio]:checked {
    background-color: var(--win-firefox-checkbox-radio-bg);
  }
}

这种方式适合你已经明确知道目标浏览器/系统的默认样式值，不需要动态感知的场景。

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