单选按钮卡片化应使用label包裹radio input，利用原生label关联实现全区域点击；需设置唯一id与嵌套结构，用opacity:0替代display:none保障可访问性；CSS通过:checked伪类联动样式，确保键盘操作与移动端适配。
单选按钮卡片化：用 label 包裹实现点击区域扩展
直接把 <input type="radio"> 套进 <label> 里，是卡片化最稳妥的做法。浏览器原生支持 label 关联表单控件，点击任意位置（包括文字、图标、整个卡片）都会触发选中，无需 JS 干预。
常见错误是只给 input 加 display: none，却忘了同步处理 label 的样式和交互反馈——结果点击没反应，或只在小圆圈上能点。
- 必须为每个
input设置唯一id，对应label的for属性，或直接嵌套（推荐嵌套，更简洁） -
input本身设为position: absolute; opacity: 0; pointer-events: none;，比display: none更安全（后者会破坏 tab 键导航） - 卡片容器用
label元素，加role="radio"和aria-checked（可选，增强可访问性）
CSS 卡片样式：聚焦 :checked 状态与视觉反馈
卡片是否“被选中”，不能只靠 JS 切 class，要用 CSS 的 :checked 伪类联动父级 label 的子元素。否则切换时样式延迟、不一致，尤其在快速点击时明显。
容易踩的坑是写成 input:checked + .card，但实际结构是 label > input，必须用 label > input:checked ~ .card-content 或更可靠的兄弟选择器（需调整 HTML 结构）。
立即学习“前端免费学习笔记（深入）”；
- 推荐结构：
<label class="card"><input type="radio" name="option"><div class="card-content">...</div></label> - 选中态样式写在
label.card input:checked ~ .card-content上，避免依赖 JS 同步 class - 给
.card加cursor: pointer和user-select: none，防止误操作 - 用
box-shadow或border表示选中，别只改背景色（色盲用户难识别）
无障碍与键盘支持：别让 Tab 和 Space 失效
纯视觉卡片容易忽略键盘操作：用户按 Tab 进入选项后，按 Space 或 Enter 应能选中，且焦点轮廓要可见。若把 input 设为 opacity: 0 却没保留 focus 样式，焦点就“消失”了。
-
input必须保留在 DOM 中、可聚焦（不能disabled或tabindex="-1"） - 为
label.card:focus-within .card-content添加焦点高亮（如outline: 2px solid #007bff） - 确保同组
radio的name属性完全一致，否则键盘切换会跳过某些项 - 用
aria-labelledby指向卡片内标题元素，提升屏幕阅读器体验
移动端适配：点击热区与防误触的关键尺寸
卡片在手机上至少要保证 44×44px 可点击区域，否则 iOS/Android 会判定为“太小”，触发缩放或误触。单纯靠 padding 不够，得结合 min-height 和 min-width 控制最小尺寸。
- 给
.card设min-height: 44px、min-width: 44px，内部内容用flex居中，避免文字撑开后高度不均 - 移除
label默认的user-select: text，防止长按唤出文本菜单 - 在 iOS 上，如果卡片含图片或复杂布局，加
-webkit-tap-highlight-color: transparent消除点击灰影 - 慎用
touch-action: manipulation——它会禁用双指缩放，仅在确认不需要缩放的场景启用
真正麻烦的是状态同步：当服务端返回初始选中值时，HTML 里 input 的 checked 属性必须和服务端一致；否则 CSS :checked 不生效，JS 也读不到正确状态。这个细节常被前端忽略，导致首屏渲染错乱。
