不能直接用 appearance: none 美化 radio，因旧版 safari（≤15.4）和部分 android webview 支持不全，易致焦点丢失、空格键失效、屏幕阅读器跳过；必须保留原生 input 语义，采用 position: absolute; opacity: 0; width: 1px; height: 1px 视觉隐藏，并通过 for/id 或嵌套确保 label 关联，样式仅作用于 label 及其伪元素，状态响应依赖 :checked + 相邻/子元素选择器。
为什么不能直接用 appearance: none 美化 input[type="radio"]
因为旧版 Safari（≤15.4）和部分 Android WebView 对 appearance: none 支持不完整，要么失效，要么导致焦点丢失、键盘空格键无法切换、屏幕阅读器完全跳过该控件。更麻烦的是：即使样式隐藏了，若没保留原生 input 的语义和交互链路，表单提交时值可能为空，或 a11y 检测直接报错。
所以必须保留原生 input 元素，用视觉隐藏而非移除：
-
position: absolute; opacity: 0; width: 1px; height: 1px;—— 比display: none（彻底剔除可访问性）和visibility: hidden（仍占布局空间、影响 label 定位）更稳妥 -
label必须显式关联：要么用for="xxx"指向input的id，要么把input包在label内 - 所有自定义样式只能作用于
label或其伪元素，且状态响应必须绑定:checked+ 相邻/子元素选择器
input[type="radio"] + label::before 和 input:checked + label::after 怎么分层画圆环和实心点
核心是两层伪元素叠加：外圈用 ::before 绘制未选中态的圆环，内点用 ::after 在选中时显示实心圆。注意伪元素默认不响应点击，所以必须确保点击区域落在 label 上（label 的 padding-left 要留够空间）。
典型写法：
input[type="radio"] {
position: absolute;
opacity: 0;
width: 1px;
height: 1px;
}
input[type="radio"] + label {
position: relative;
padding-left: 28px;
cursor: pointer;
}
input[type="radio"] + label::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 16px;
border: 2px solid #999;
border-radius: 50%;
}
input[type="radio"]:checked + label::after {
content: "";
position: absolute;
left: 4px;
top: 50%;
transform: translateY(-50%);
width: 8px;
height: 8px;
background-color: #007bff;
border-radius: 50%;
}
关键细节：
-
top: 50%; transform: translateY(-50%)垂直居中比top: Xpx更可靠，尤其字体行高变化时 - 内点
::after的left和width/height要匹配外圈尺寸，否则偏心或溢出 - 如果用
input[type="checkbox"]，::after可改用content: "✓"或 SVG 背景图，但需注意字体 fallback 和缩放
多选框（checkbox）和单选框（radio）的 CSS 处理差异在哪
视觉结构相似，但语义和交互逻辑不同，CSS 实现上要注意三点：
-
name属性作用不同：radio同名即互斥，checkbox同名可多选 —— 这不影响 CSS，但影响 JS 获取值的方式（querySelectorAll('input[name="x"]:checked')） - 伪元素绘制逻辑不同：单选框是「圆环 + 圆点」，复选框常用「方框 + 对勾」或「填充色块」；后者建议用
background-image: url("data:image/svg+xml,...")避免字体渲染兼容性问题 - 禁用态处理更严格：
input:disabled + label要同步灰掉文字色和伪元素边框色，且cursor: not-allowed必须加在label上，否则点击无反馈 - 键盘支持不能省：
input:focus + label::before应加轮廓（如box-shadow: 0 0 0 2px #007bff;），否则 tab 导航时用户看不到当前焦点
移动端点击区域太小、误触率高怎么办
原生单选/复选框点击热区只有 ~12×12px，远低于 WCAG 推荐的 44×44px 最小触控尺寸。光靠增大伪元素尺寸不够，必须扩大 label 的响应区域：
- 给
label加min-height: 44px，并用display: flex; align-items: center;垂直居中内容 -
padding-left至少设为32px（伪元素宽 + 间距），避免文字紧贴控件造成误点 - 不要依赖
font-size控制整体大小 —— 小屏设备下文字缩放会破坏布局，优先用固定px或rem单位控制控件尺寸 - 真机测试时重点看 iOS Safari 和 Android Chrome：某些 WebView 对
pointer-events: none在伪元素上的行为不一致，宁可多套一层span也不强行 hack
最易被忽略的点：所有自定义样式必须通过 :checked 和 :disabled 显式声明，不能依赖 JavaScript 动态加 class —— 否则 SSR 页面首屏或 JS 失败时，用户看到的就是裸露的原生丑控件。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
