直接修改input[type="radio"]样式无效，因浏览器限制其css属性生效；需通过label绑定、隐藏原生控件、利用:checked状态配合自定义元素实现样式控制。
为什么直接改input[type="radio"]的样式没用
因为浏览器对原生表单控件（尤其是input[type="radio"]和input[type="checkbox"]）的样式控制极弱，appearance默认为none以外的值时，绝大多数CSS属性会被忽略——比如width、height、background、border-radius基本无效。
真正能生效的只有少数几个属性（如opacity、cursor），所以硬改input本身等于白忙。
- 别写
input[type="radio"] { background: red; }——它不会变红 - 别指望
input:checked::before——input不支持::before/::after - 必须借助
label+:checked+ 隐藏原生控件 这套组合拳
怎么用label绑定并触发:checked
核心是让点击label等价于点击input，从而触发:checked状态变化，再用这个状态驱动自定义样式的显示/隐藏。
绑定方式有两种，推荐显式for属性（更健壮，不依赖DOM顺序）：
<input type="radio" name="theme" id="theme-dark" value="dark"><label for="theme-dark">深色模式</label>
-
id和for值必须完全一致（区分大小写、空格） - 不要省略
name属性——否则多个radio无法互斥 -
label里可以放任意HTML（图标、文字、图片），点击整个区域都有效
用:checked + label或label > input:checked + span控制样式
原生input隐藏后，所有视觉元素都得靠label里的其他标签（比如span）来承载。关键在于利用相邻兄弟选择器（+）或子选择器（>）定位到它。
典型结构：
<input type="radio" name="size" id="size-m" class="visually-hidden"><label for="size-m"> <span class="radio-ui"></span> <span class="label-text">中号</span> </label>
CSS重点：
- 先隐藏原生控件：
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); } - 用
input:checked + label .radio-ui或label > input:checked + .radio-ui选中对应UI元素 - 避免用
input:checked ~ label——如果label不在input后面，就失效 - 圆点效果常用
border-radius: 50%+background；选中态加个box-shadow更明显
移动端点击区域小、iOS Safari不响应:checked怎么办
两个常见问题：一是label包裹内容太小，手指点不准；二是iOS Safari在某些嵌套结构下不触发:checked（尤其用了display: flex或transform后）。
- 给
label设min-height: 44px（iOS最小可点击区域）+padding，确保触控友好 - 避免在
label或其父容器上用pointer-events: none或opacity: 0（会切断事件冒泡） - 如果用了
transform，加will-change: transform或backface-visibility: hidden有时能修复iOS Safari的事件穿透问题 - 真遇到不响应，检查是否误把
input放在label内部又没加for——这种结构在部分iOS版本里不可靠
最稳的写法是保持input和label同级、用for绑定、label内只放纯内容或简单内联元素。复杂交互（比如动画）尽量用JS补位，别强求纯CSS覆盖所有边界情况。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
