直接给 radio 输入框加背景色无效，因其为不可见原生控件；应隐藏 input 后通过 input:checked + label 控制 label 样式，并确保结构、可访问性与兼容性。
为什么直接给 input[type="radio"] 加背景色没反应
浏览器对原生单选按钮的渲染极其受限：input[type="radio"] 本身是不可见控件，background、border、color 等样式属性对其完全无效。你写的 input[type="radio"]:checked { background: red; } 看似逻辑正确，但实际不会渲染出任何颜色变化——这不是选择器写错了，而是浏览器根本不允许你“画”在它上面。
input:checked + label 是核心触发机制
必须把视觉样式加在 label 上，靠兄弟选择器监听状态。关键前提是 HTML 结构要满足「input 元素紧邻 label」或使用 for/id 显式关联。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 推荐结构：把
input放在label前面（不嵌套），用+选择器精准捕获相邻关系 - 隐藏原生控件：用
position: absolute; opacity: 0;，不能用display: none;（会丧失可访问性和键盘聚焦能力） - label 必须设为
display: inline-block或block，否则padding/background不生效 - 同一组所有
input的name值必须完全一致，否则无法互斥
<input type="radio" name="size" id="s" value="s"><label for="s">S</label> <input type="radio" name="size" id="m" value="m"><label for="m">M</label>
input[type="radio"] {
position: absolute;
opacity: 0;
}
label {
display: inline-block;
padding: 8px 16px;
border: 1px solid #ddd;
border-radius: 4px;
margin-right: 8px;
cursor: pointer;
}
input:checked + label {
background: #007bff;
color: white;
border-color: #007bff;
}
想加圆点图标？用 label::before 模拟更可控
仅靠 label 背景色只能做“卡片式”按钮；如果需要左侧带自定义圆点（比如不同大小、颜色、动画），就得用伪元素模拟，且必须处理基线对齐问题。
- 给
label加position: relative;，为::before定位准备容器 -
label::before绘制默认圆点（content: ""+border-radius: 50%） -
input:checked + label::before改变其background或添加transform动画 - 用
vertical-align: middle或transform: translateY(-50%)对齐文字，否则圆点会偏上或偏下
容易被忽略的兼容性与可访问性细节
真正上线时，这几个点常被跳过，但直接影响键盘用户和屏幕阅读器体验：
- 每个
input必须有唯一id，且label的for属性严格匹配——否则 Tab 键无法聚焦到对应文字区域 - 别删掉
cursor: pointer，否则鼠标悬停时没有手型提示，违背用户直觉 - 为
label:focus-within或input:focus + label补充焦点边框（如outline: 2px solid #007bff），否则键盘操作时看不见当前焦点 - 移动端点击区域至少保证
44×44px，可通过min-width/min-height或外层padding保障
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
