appearance属性被忽略？先确认浏览器支持和重置逻辑
直接写 appearance: none 却没效果，大概率是浏览器不支持或被其他样式覆盖。Chrome/Edge 110+、Firefox 85+、Safari 15.4+ 才真正稳定支持 appearance，旧版 Safari 甚至要用 -webkit-appearance: none 才生效。
更关键的是：即使写了 appearance: none，某些表单元素（比如 <select>）在 macOS 上仍会保留原生下拉箭头，因为系统级渲染优先级高——这不是 bug，是设计使然。
- 必须同时加
-webkit-appearance: none和appearance: none才覆盖主流引擎 - Firefox 下
<input type="number">的上下箭头需额外用::-moz-number-spin-box隐藏 - 禁用
appearance后，<select>的宽度可能塌缩，要手动设min-width或width
select下拉箭头消失但点击区域变小？补全可交互样式
appearance: none 干掉的是视觉层，不是交互层。移除原生样式后，<select> 的点击热区默认只在文字区域，用户点空白处容易失焦——这会让体验比原来还差。
真实场景里，得靠伪元素或额外标签模拟箭头，并扩大点击范围：
立即学习“前端免费学习笔记（深入）”；
- 给
<select>包一层<div class="select-wrapper">，用position: relative定位自定义箭头 - 用
<select>::after伪元素画箭头（注意：部分浏览器不支持对<select>使用伪元素，稳妥起见还是用额外<span>） - 务必加
padding-right给自定义箭头留空间，否则文字被遮挡 - 别忘了用
cursor: pointer明确提示可点击
input[type="checkbox"] 和 radio 怎么彻底重绘？别只盯着appearance
appearance: none 能隐藏原生框，但光这样只是“看不见”，不是“重做”。勾选状态、焦点反馈、键盘导航（如空格切换）全得自己补。
常见翻车点是只改外观，忘了语义和可访问性：
- 必须保留
input标签本身，不能替换成<div>，否则屏幕阅读器读不到状态 - 用
input:checked + label::before控制自定义图标，比 JS 切换 class 更可靠 - 加上
input:focus + label::before { outline: 2px solid #007bff }，满足 WCAG 焦点可见要求 - 移动端要注意
touch-action: manipulation防止点击延迟
appearance影响表单验证样式？invalid/valid伪类要单独处理
移除原生 appearance 后，浏览器不会自动给 input:invalid 加红框或警告图标——这些是原生控件内置行为，一并被干掉了。
你得手动接管验证反馈：
- 用
:invalid:not(:placeholder-shown)区分“未填”和“填错”，避免初始就标红 -
input:invalid { border-color: #dc3545 }是基础，但最好再加background-image: url("warning.svg")做视觉提示 - 如果用了 JS 表单验证，别依赖
:valid/:invalid，改用动态加class="is-invalid" - 注意：某些浏览器（如 Safari）对
appearance: none的input[type="date"]会禁用原生日期弹窗，得换第三方 picker
最麻烦的不是怎么画个好看的 checkbox，而是让所有状态（聚焦、悬停、禁用、验证失败、屏幕阅读器播报）都对得上。appearance 只是起点，不是终点。
