firefox中appearance:none需同时写-moz-appearance:none才生效；伪元素不能直接用于input，应绑定到label等容器；隐藏checkbox须用clip/clip-path而非opacity；focus和:indeterminate状态需单独定义样式。
Firefox 中 appearance: none 不生效的典型表现
你写了 input[type="checkbox"] { appearance: none; }，但在 Firefox 里原生方框依然顽固存在，或者只在部分版本消失——这不是你漏写了 width/height，而是 Firefox 对标准 appearance 的支持有断层。Firefox 84 及更早版本完全忽略 appearance: none，必须显式加 -moz-appearance: none 才能真正剥离 UA 样式。只写标准属性，在这些版本里等于没写。
常见错误现象：
• 开发者工具里看到 appearance: none 被划掉（invalid）
• Chrome/Safari 正常隐藏，Firefox 仍显示灰色方块
• 加了 width: 18px; height: 18px; 后尺寸有了，但原生控件还在上面叠一层
- 务必同时声明：
-webkit-appearance: none;、-moz-appearance: none;、appearance: none; - 加完立刻补
width和height，否则控件尺寸塌缩为 0×0，点击区域丢失 - 若用了 Bootstrap 或 normalize.css，检查是否被重置规则覆盖；临时加
!important验证
::before/::after 在 Firefox 中不渲染的根源
你在 input[type="checkbox"] 上写了 ::before { content: "✓"; }，结果 Firefox 里什么都没出现——不是选择器写错，是 Firefox（和其他所有浏览器）根本不会给替换元素（如 input）挂载伪元素。它静默忽略，DevTools 里也看不到该伪元素。
正确做法是把视觉层移到可绑定伪元素的容器上，比如 label 或相邻兄弟元素：
- 结构必须是：
<input type="checkbox" id="x"><label for="x">同意</label>，或更推荐<label><input type="checkbox">同意</label> - 样式绑定用：
input:checked + label::before（相邻兄弟）或label > input:checked + span::before（嵌套结构） - 别用
~（通用兄弟），它会匹配后续所有同类label，易误触且性能略差
Firefox 下隐藏原生 checkbox 的坑：opacity vs clip
很多人用 opacity: 0 隐藏 checkbox，结果 Firefox 里键盘 Tab 焦点跳过、屏幕阅读器读不到——这不是 bug，是 Firefox 对可访问性的严格实现。opacity: 0 仅视觉透明，但某些 UA 仍可能丢弃焦点逻辑；而 display: none 或 visibility: hidden 则直接移出可访问性树。
真正稳妥的隐藏方式（Firefox/Chrome/Safari 兼容）：
-
position: absolute;移出渲染流 -
clip: rect(0, 0, 0, 0);或clip-path: inset(100%);彻底裁出视口 -
width: 1px; height: 1px;防止布局塌陷 - 保留
tabindex（如有需要）和原生表单提交能力
别省略 clip 或 clip-path ——单靠 opacity: 0 在 Firefox 中风险极高。
Firefox 特有的 focus 和 :indeterminate 处理
你写了 input:checked + label::before { background: #007bff; }，但用户用键盘 Tab 进来时完全看不出焦点在哪——Firefox 对 :focus 的默认 outline 极其微弱，甚至不可见。而且，Firefox 对 :indeterminate（半选状态）的支持比 Chrome 更早也更稳定，但很多人忘了单独定义它。
- 必须加：
input:focus + label::before { outline: 2px solid #007bff; outline-offset: 2px; } -
input:indeterminate + label::before要单独设样式（如加一道横杠），JS 设置el.indeterminate = true后才触发 - 禁用态
input:disabled + label::before也要单独写，否则自定义样式在disabled下仍保持高亮
真正难的不是画个勾，而是让那个“看不见的 input”在 Firefox 里既可访问、又响应精准——结构松动一点，焦点就丢，状态就不同步。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
