background-image 在 radio 上无效是因为浏览器对原生 radio 渲染硬编码，忽略背景边框属性；必须用 input:checked + label::before 通过伪元素间接控制图片切换。
不能直接用 background-image 切换单选按钮的“选中态图片”——原生 input[type="radio"] 不响应该样式，必须靠伪元素 + :checked 选择器间接实现。
为什么 background-image 在 radio 上无效
浏览器对 input[type="radio"] 的渲染是硬编码的，background-image、border、border-radius 等绝大多数背景和边框相关属性在多数引擎里被忽略或部分生效。即使加了 appearance: none，Chrome 和 Safari 可能移除默认控件但不开放绘图层，Firefox 更倾向完全无视。真正可控的只有伪元素（::before/::after）及其 content、background-image、transform 等。
用 label::before 实现背景图切换的正确写法
核心是把图片画在 label 的伪元素上，并用 input:checked + label::before 控制其内容或背景变化。前提是 DOM 结构为 input 紧邻 label（兄弟关系），且 label 设 position: relative。
-
input[type="radio"]必须用opacity: 0或position: absolute; left: -999px隐藏——禁用display: none，否则状态无法联动、键盘焦点丢失 -
label::before要设content: ""、display: inline-block、position: absolute，再用top/left对齐原生控件位置 - 未选中态：用
label::before { background-image: url("uncheck.png"); } - 选中态：用
input:checked + label::before { background-image: url("check.png"); }——注意不是改input自身，而是改它后面紧挨着的label的伪元素
用 CSS 变量 + background-image 动态切换图片路径
若需多主题或运行时换图，可结合 CSS 变量，但变量必须定义在能响应状态的选择器里，不能只挂 :root。
input[type="radio"] {
opacity: 0;
position: absolute;
}
label {
position: relative;
padding-left: 32px;
}
label::before {
content: "";
position: absolute;
left: 0; top: 50%;
transform: translateY(-50%);
width: 20px; height: 20px;
background-image: var(--radio-bg-uncheck);
background-size: contain;
background-repeat: no-repeat;
}
input:checked + label::before {
--radio-bg-uncheck: url("radio-checked.svg");
/* 注意：这里只是重定义变量，实际生效靠下一行 */
background-image: var(--radio-bg-uncheck);
}
⚠️ 关键点：input:checked + label::before 中重复写 background-image: var(--radio-bg-uncheck) 是必须的——CSS 变量不会自动触发重绘，必须显式调用才能读新值。
常见踩坑：图片错位、点击失效、无障碍中断
这些问题几乎都源于结构或定位偏差：
- label 没设
position: relative→::before的absolute定位以 body 为参考，图片飘走 - input 和 label 不是相邻兄弟（比如中间有空格、换行或其它标签）→
+选择器不匹配，:checked状态完全无反应 - 用了
for="xxx"把 input 拆到别处 → 必须改用input:checked ~ label（非紧邻兄弟），但会匹配所有后续同级 label，易误触 - 图片尺寸没约束（如 SVG 未设
viewBox或宽高）→ 在不同缩放/设备下拉伸变形，建议统一用background-size: contain+ 固定伪元素宽高 - 忽略
:focus样式 → 键盘用户 Tab 进来时看不到焦点框，应在label:focus-within::before或label:focus::before加一层 outline 或阴影
最隐蔽的细节：SVG 图片若含内联 fill 属性，将无法被 CSS fill 覆盖；得用 currentColor 或外部定义 <defs></defs> 才能动态染色。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
