Safari中HTML/CSS代码失效求助：单选按钮样式异常

Safari对原生表单控件的样式渲染逻辑和Chrome存在差异，尤其是自定义单选按钮状态样式时，需要针对WebKit内核做针对性适配：

1. 快速修复方案 #

原生单选按钮在Safari中无法直接修改部分状态样式，常规解决思路是隐藏原生控件，通过伪元素模拟自定义样式：

/* 隐藏原生单选按钮，同时保留交互能力 */
input[type="radio"] {
  appearance: none;
  -webkit-appearance: none; /* Safari/WebKit 专属前缀 */
  width: 20px;
  height: 20px;
  border: 2px solid #ccc;
  border-radius: 50%;
  outline: none;
  cursor: pointer;
}

/* 选中状态样式 */
input[type="radio"]:checked {
  background-color: #007bff;
  border-color: #007bff;
}

/* 悬停未选中状态 */
input[type="radio"]:hover:not(:checked) {
  border-color: #999;
}

/* 点击激活未选中状态 */
input[type="radio"]:active:not(:checked) {
  border-color: #666;
}

其中-webkit-appearance: none是适配Safari的核心，它会禁用原生控件的默认样式，允许你完全自定义外观。

2. Vendor Prefixes（厂商前缀）入门要点 #

• 厂商前缀是浏览器厂商为测试未标准化的CSS特性添加的前缀，Safari/基于WebKit的浏览器用-webkit-，旧版Firefox用-moz-，旧版IE用-ms-
• 如今多数CSS特性已无需前缀，但涉及原生控件样式的appearance等属性，Safari至今仍要求添加-webkit-前缀
• 书写规则：先写标准属性，再写带厂商前缀的属性（比如先写appearance: none;，再写-webkit-appearance: none;）

3. 入门学习方向 #

• 官方文档：重点看MDN的「CSS 厂商前缀」章节，里面涵盖前缀的作用、常用前缀列表及需要前缀的属性说明
• 专项教程：找讲解表单控件跨浏览器兼容的内容，重点学习WebKit内核（Safari）的适配技巧，比如自定义复选框、单选按钮的通用方案
• 实战练习：做几个跨浏览器兼容的表单样式项目，对比Chrome和Safari的渲染差异，总结适配规律

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