不能直接用background-image切换单选按钮的“选中态图片”——原生input[type="radio"]不响应该样式，必须靠伪元素+ :checked选择器间接实现；核心是隐藏原生控件，用label绑定并控制其伪元素背景图切换。
用 background-image 切换单选按钮的视觉状态
原生 <input type="radio"> 无法直接用图片替代圆点，但可以通过隐藏原生控件 + 用 label 绑定 + CSS 控制背景图实现。关键不是“替换按钮”，而是“用 label 模拟按钮，靠 :checked 触发样式变化”。
常见错误是直接给 input 设置 background-image——无效，因为原生 radio 不渲染背景；或者忘记加 display: none 或 opacity: 0 隐藏原生控件，导致双控件重叠、点击错位。
- 必须用
label[for="xxx"]或把input包在label里，否则点击图片无法触发选中 -
input[type="radio"]需显式隐藏（推荐position: absolute; opacity: 0; pointer-events: none;），避免干扰布局又保留可访问性 - 背景图切换逻辑写在
label上，通过input:checked + label或input:checked ~ label（取决于 DOM 结构）控制
background-image 路径与尺寸怎么设才不拉伸变形
图片作为状态标识，通常需要等宽等高、居中、不重复。用 background-size: contain 或 cover 都可能失真；更稳妥的是明确设定容器宽高 + background-size: 100% 100%（适合图标类固定尺寸图），或用 background-size: auto + background-position: center + background-repeat: no-repeat。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 容器（
label）必须有明确的width和height，否则背景图无参照，容易塌陷或溢出 - 推荐用 PNG 图标，尺寸统一为 20×20px 或 24×24px，对应 label 的宽高设置
- 未选中状态用默认图，选中状态用另一张图，两张图尺寸严格一致，避免切换时 layout shift
- 如果用雪碧图，需配合
background-position偏移，但维护成本高，小项目不建议
如何兼容 Safari 和旧版 Edge 的 :checked 伪类触发
Safari 15.4 之前、Edge 18 及更早版本对 input:checked + label 的相邻兄弟选择器支持不稳定——尤其当 input 和 label 不是紧邻 DOM 节点时。最可靠的方式是把 input 放进 label 内部，用 label > input:checked + span 这类结构，或改用 JavaScript 监听 change 事件手动 toggle class。
- 优先采用嵌套结构：
<label><input type="radio" name="x"><span class="radio-icon"></span></label> - 这样可以直接用
input:checked + .radio-icon，无需依赖兄弟选择器顺序 - 若必须分离 DOM（如 CMS 输出限制），加一层
div包裹并用input:checked ~ .radio-icon，但需确认父容器没有overflow: hidden截断匹配链 - IE11 不支持
:checked作用于非input元素，所以不要尝试用div[data-checked]这类模拟方案
用 CSS 变量动态切换背景图路径是否可行
不可行。background-image 不接受 CSS 变量值（var(--img-url) 在大多数浏览器中会被忽略）。即使现代 Chrome/Firefox 支持 url(var(--img))，Safari 完全不认，且无法配合 :checked 动态更新变量值——CSS 变量不能响应伪类状态变化。
- 想减少重复代码？用预处理器（如 Sass）生成两套规则，或用 BEM 命名约定批量处理
- 真正动态换图（比如用户上传图标）必须靠 JS：监听
change，读取input.value，然后el.style.backgroundImage = 'url(...)' - 如果图来自 CDN 且路径规则固定，可用
data-*属性存基础路径，再用 JS 拼接，但纯 CSS 方案只能写死两套background-image
真正麻烦的不是换图，而是确保 label 点击区域精准、focus outline 可见、键盘 tab 顺序正确——这些比背景图本身更容易被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
