原生input[type="radio"]无法直接设置width、height或border-radius，因浏览器强封装其渲染逻辑；需用opacity:0+position:absolute隐藏原生控件，再通过label伪元素重绘样式，并确保input与label正确关联。
为什么原生 input[type="radio"] 不能直接用 CSS 改宽高
直接给 input[type="radio"] 设置 width、height 或 border-radius 大概率无效——多数浏览器会忽略这些样式，因为原生控件渲染逻辑受操作系统和 UA 样式表强约束。强行设 display: block 或 flex 也容易破坏对齐和可访问性。
用 appearance: none 清除默认样式再重绘
这是现代方案的核心：先剥离原生外观，再用伪元素或 label 背景构建视觉控件。关键点：
-
appearance: none必须配合-webkit-appearance: none（Safari 和旧版 Chrome） - 不能设
display: none或visibility: hidden，否则键盘焦点和屏幕阅读器会丢失 - 推荐用
opacity: 0+position: absolute隐藏原生控件，保留功能语义 - 用
input:checked + label::before或label::after绘制选中状态（如实心圆点）
示例片段：
input[type="radio"] {
opacity: 0;
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
}
label {
position: relative;
padding-left: 28px;
cursor: pointer;
}
label::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 16px;
border: 2px solid #999;
border-radius: 50%;
}
input:checked + label::after {
content: "";
position: absolute;
left: 5px;
top: 50%;
transform: translateY(-50%);
width: 6px;
height: 6px;
background: #3582E9;
border-radius: 50%;
}
横向排列时 label 和 input 的对齐陷阱
单选按钮横向排不齐，往往不是 flex 没设好，而是 baseline 错位或空格干扰：
- 不要只给
input设vertical-align: middle，必须同时控制label的line-height和vertical-align - HTML 源码中
label之间的换行会被渲染为空格，导致间距不均；要么写在一行，要么在父容器设font-size: 0再单独给label设字号 - 用
display: flex是最稳的横向方案，但要加align-items: center，且确保label不是display: block - 移动端点击热区仍小——真正有效的做法是扩大
label的padding，而不是试图撑大input
兼容性与无障碍必须同步处理
纯视觉美化容易踩两个坑：
- 没留出焦点轮廓（
:focus-visible），键盘用户无法感知当前聚焦项；建议用box-shadow替代outline，并避免outline: none无替代 - 自定义样式后未测试屏幕阅读器行为：确保
label正确关联for或包裹input，且aria-checked状态由浏览器自动管理，无需手动加 - IE11 不支持
appearance，如需兼容，得回退到「隐藏 input + label 背景图」方案，用 PNG 或 SVG 作为未选中/选中状态
最常被忽略的一点：所有自定义样式都依赖于 input 和 label 的 DOM 顺序（input 必须在 label 前，或用 for/id 显式绑定），顺序错一个，:checked + label 就完全失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
