用.radio--custom替换原生单选框需隐藏input（appearance: none），通过input + label::before/after模拟外观，mixin须支持参数化、焦点管理、disabled/hover条件适配及ie11降级（如svg背景），确保可访问性与跨浏览器一致性。
怎么用 .radio--custom 替换原生单选框样式
原生 <input type="radio"> 无法直接美化，必须靠隐藏原生控件 + 用伪元素或额外标签模拟外观。Less 里最稳妥的方式是封装一个 Mixin，把视觉重绘、状态同步、可访问性（aria-hidden、focus 焦点管理）全包进去。
实操建议：
- 先用
appearance: none隐藏原生控件，再用::before或::after绘制圆圈和选中点 - Mixin 必须接收
@size、@color、@border-color等参数，避免写死像素值 - 别忘了给
:focus加 outline 或 shadow，否则键盘用户无法感知焦点位置 - 用
position: absolute定位伪元素时，父容器得设position: relative，否则偏移错乱
checked 状态下伪元素怎么精准显示选中点
很多人以为加个 input:checked::after 就完事，结果发现点不出现——根本原因是伪元素默认不能作用于 input 元素（CSS 规范限制）。必须借助相邻兄弟选择器 + label 结构才能触发。
实操建议：
- HTML 必须写成
<input id="a"><label for="a">选项</label>，不能用包裹式结构 - 在 Mixin 中用
input:checked + label::before控制外圈，再用input:checked + label::after控制内点 - 内点的
transform: scale(0)→scale(1)动画比opacity更可靠，避免模糊渲染 - 注意
z-index层级：内点必须高于外圈，否则被遮住
为什么 Mixin 里要手动处理 :disabled 和 :hover
浏览器对原生单选框的 :disabled 样式有强干预，直接套用 opacity: 0.5 会导致伪元素也变灰，但实际交互已被禁用——这会让视觉和行为不一致。而 :hover 在触屏设备上无意义，但开发者常误加导致 iOS Safari 出现意外高亮。
实操建议：
-
:disabled状态应单独写规则：input:disabled + label { cursor: not-allowed; }，并用filter: grayscale(0.5)替代 opacity -
:hover必须加媒体查询兜底：@media (hover: hover) and (pointer: fine) { ... }，否则移动端误触发 - 别在 Mixin 内部默认启用 hover 效果，把它做成可选参数，比如
.radio--custom(@hover: false)
IE11 下 ::before 不显示？兼容性关键点在哪
IE11 不支持对 input 的伪元素，也不支持 appearance，所以 Mixin 必须提供降级路径：要么用 SVG 作为背景图，要么用额外 <span></span> 标签替代伪元素。
实操建议：
- 用
@supports not (appearance: none)包裹现代写法，内部写 IE 专用规则 - IE 降级方案优先用
background-image: url("data:image/svg+xml,...")，避免额外 DOM 节点 - 如果项目仍需支持 IE11，Mixin 中必须暴露
@fallback: svg或@fallback: element参数开关 - 别依赖
transform实现选中动画，IE11 对transform+transition组合支持极差，改用top/left位移
真正难的不是画出那个圆圈，而是让所有状态（focus/checked/disabled/hover/touch）互不干扰，又在不同浏览器里表现一致。尤其是 label 和 input 的绑定关系、伪元素的渲染时机、以及可访问性属性的同步节奏——这些地方一松动，整个组件就不可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
