为何选中的单选按钮呈蓝色而非灰色？技术原因排查
2026-5-26
为什么网页里的单选按钮选中是蓝色，自己写的标准HTML却不是？
嘿，这个问题我太有共鸣了！之前我也纳闷过为啥同样是标准单选按钮，不同网页显示差这么多，其实大概率是这几个原因：
1. 浏览器默认样式/系统主题的差异
现代浏览器的表单控件样式其实会跟着系统主题走，比如Windows 11的默认主题里，单选按钮选中状态就是蓝色；而如果你的浏览器用了自定义主题，或者系统主题是浅色/深色模式，控件样式也会变。另外不同浏览器的默认样式也有区别——比如Chrome现在的默认单选选中色是蓝色，Safari可能就偏灰色调，你之前看的网页和自己测试用的会不会是不同浏览器？
2. 隐性的全局样式库
很多网页会引入Normalize.css或者类似的样式重置库，这类库会统一不同浏览器的表单控件表现，其中就可能把单选按钮的选中色统一设为蓝色。你没看到CSS修改，可能是因为这个库是通过外部<link>引入的，藏在<head>里没注意到。
3. CSS的accent-color属性
这是CSS的新特性，专门用来设置表单控件（单选、复选框、进度条等）的强调色。只要在父元素或者input本身加一句：
input[type="radio"] { accent-color: blue; }
就能轻松把选中状态改成蓝色，很多现代网站会用这个属性来匹配品牌色，你看到的网页大概率用了这个，但你自己的页面没加这段CSS。
怎么验证？
- 先检查自己浏览器的系统主题设置，切换成默认主题看看单选按钮会不会变蓝；
- 在自己的测试页面里加上面那段
accent-color的CSS，看看效果是不是和你看到的网页一致； - 查看目标网页的开发者工具（F12），在Elements面板里选中单选按钮，看Styles标签里有没有继承的
accent-color或者其他自定义样式。
内容的提问来源于stack exchange，提问作者Sackling
