appearance: none 是表单样式统一的第一步，因浏览器对 select、input[type="number"] 等元素内置私有渲染（如箭头、微调按钮），干扰盒模型且不受 box-sizing 控制，需先剥离原生外观才能真正自定义。
为什么 appearance: none 是表单样式统一的第一步
因为浏览器对 <input type="number">、<select>、<textarea> 等元素默认加了私有渲染逻辑，比如 Chrome 给 input[type="number"] 加了上下微调按钮，Safari 给 select 加了下拉箭头，这些都算在元素的盒模型里，但不响应 padding 或 border 的常规计算方式。直接写 box-sizing: border-box 压不住它们。
所以得先用 appearance: none 把原生控件“剥掉”，让样式真正由你控制。
-
appearance: none在 Chrome/Firefox/Edge（Chromium）中直接生效；Safari 15.4+ 支持标准语法，旧版需加-webkit-appearance: none - 加了之后，
select会丢失下拉箭头，input[type="number"]会丢掉增减按钮——这是预期行为，不是 bug - 别只写
appearance: none就完事，它只是起点；后续必须手动补上交互反馈（比如:focus样式）和可访问性支持（如role或正确label关联）
哪些表单元素必须配 appearance: none 才能真正自定义
不是所有表单控件都需要。像 input[type="text"]、input[type="email"] 这类纯文本输入框，原生外观干扰小，appearance: none 影响不大。但以下几类，不加就很难统一样式：
-
<select>：各浏览器下拉箭头位置、大小、颜色全不同，且 Safari 的箭头甚至会撑宽容器 -
input[type="number"]：Chrome 默认右侧带两个小按钮，占宽度、影响padding-right对齐 -
input[type="range"]：滑块轨道和拇指（thumb）样式完全由 UA 控制，不加appearance: none就没法重绘 -
<textarea>：部分浏览器会在右下角加调整手柄（resize），虽不影响盒模型主结构，但加了appearance: none后可配合resize: none干净收尾
appearance: none 后盒子尺寸突然变小？这是正常现象
剥离原生控件后，浏览器不再为那些隐藏 UI 预留空间，导致元素视觉宽度/高度收缩。比如一个设了 width: 200px 的 select，加了 appearance: none 后可能只剩 192px 宽——那 8px 就是 Safari 原生箭头占的位置。
立即学习“前端免费学习笔记（深入）”；
- 解决方法不是硬调
width，而是用padding补空间：比如给select加padding-right: 24px，再用伪元素或背景图放自定义箭头 - 对
input[type="number"]，记得额外重置::-webkit-inner-spin-button和::-webkit-outer-spin-button，否则 Chrome 仍可能显示残影 - 别依赖
height精确控制select高度，不同字体下line-height渲染差异大，优先用padding+min-height
兼容性与可访问性的隐性代价
appearance: none 本身兼容性现在没问题（Chrome 75+、Firefox 85+、Safari 15.4+、Edge 79+），但副作用常被忽略：它会让某些屏幕阅读器失去对控件类型的语义识别，尤其 select 和 range。
- 加了
appearance: none的select必须保留role="combobox"和aria-haspopup="listbox"，否则 NVDA/JAWS 可能读成“普通输入框” -
input[type="range"]剥离后，要手动加aria-valuenow、aria-valuemin、aria-valuemax，并监听input事件同步更新 - 不要为了“看起来统一”而删掉所有原生交互反馈，比如
:focus-visible样式缺失，会导致键盘用户无法定位当前控件
真正的统一样式，不是让所有表单长得一样，而是让它们在视觉、交互、语义三层都保持一致。剥离外观只是第一步，后面补的每行 CSS、每个 ARIA 属性，都在填这个坑。
