单选按钮卡片化需隐藏原生radio并由label承载样式与交互，核心是确保语义正确、可访问且状态可控；必须用:checked + label等选择器绑定状态，label须包裹全部内容并正确关联id/for。
单选按钮卡片化不是加个 border-radius 就完事——它本质是用视觉容器替代默认控件，同时必须保证语义正确、可访问、状态可控。核心难点在「隐藏原生 input 但不破坏交互链路」和「label 与状态样式精准绑定」。
为什么不能直接给 input[type="radio"] 加卡片样式
浏览器对原生表单控件的渲染限制极多：input[type="radio"] 不支持 border-radius、box-shadow 等大多数视觉属性，强行设置无效；appearance: none 虽能重置，但 Safari 旧版本兼容性差，且会丢失焦点/可访问性语义。真正可行的路径是：把样式全交给关联的 label 或其子元素承载。
:checked + label 是卡片状态切换的基石
这个组合选择器决定了「谁被点中，谁变样式」的响应逻辑。前提是 HTML 结构必须满足：radio 元素和目标 label 同级、且 label 紧跟其后（或用 for 属性正确绑定）。常见错误包括：
- radio 和 label 不在同一个父容器内 →
:checked + label失效 - label 写在 radio 前面 → 相邻兄弟选择器
+不匹配 - 用了
~（通用兄弟）但中间插入了其他元素（如注释、空格文本节点）→ 在部分浏览器中意外中断匹配
推荐结构写法：
<div class="card-option"> <input type="radio" name="plan" id="basic" value="basic"><label for="basic">Basic Plan</label> </div>
对应 CSS：
.card-option input[type="radio"] { display: none; }
.card-option label {
display: block;
padding: 12px 16px;
border: 1px solid #ddd;
border-radius: 8px;
cursor: pointer;
}
.card-option input[type="radio"]:checked + label {
border-color: #007bff;
background-color: #f8f9fa;
}
卡片内嵌复杂内容时，label 必须包裹全部视觉元素
如果卡片里有图标、副标题、价格标签等，别把它们写在 label 外面——否则点击这些区域无法触发选中。正确做法是把整个卡片内容都放进 label 里，并用 for 属性维持语义：
<div class="card-option">
<input type="radio" name="card" id="silver" value="silver"><label for="silver">
<div class="card-header">Silver</div>
<div class="card-price">$9.99/mo</div>
</label>
</div>
此时 input[type="radio"]:checked + label 依然生效，且整个 label 区域都是可点击热区。注意：若 label 内含 button 或其他可交互元素，需防止事件冒泡干扰选中逻辑。
无障碍与键盘导航容易被忽略
隐藏 input 后，屏幕阅读器仍需感知状态变化。必须保留 id 和 for 关联，并为 label 添加 tabindex="0"（如果 label 本身不可聚焦）或确保其天然可聚焦（如设置了 display: block 和 cursor: pointer）。另外，用 Space 键触发选中是默认行为，但某些自定义卡片若用了 div 替代 label，就彻底断掉了键盘支持——这在 WCAG 2.1 中属于严重可访问性缺陷。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
