不同浏览器对表单控件默认样式实现独立，尤其select、input[type="date"]等原生控件依赖系统UI，CSS控制受限；appearance: none仅剥离样式，需配合厂商前缀及伪元素补全；部分控件如date/time/color无法纯CSS重置，建议用JS库替代。
为什么 input、textarea、select 在不同浏览器里长得不一样
因为每个浏览器（Chrome、Safari、Firefox）对表单控件的默认样式实现是独立的，尤其是 select 和 input[type="date"] 这类原生控件，根本没走 CSS 渲染管线——它们是操作系统级 UI 组件的封装。你写的 border 或 font-size 可能生效，但 background、padding 甚至 height 在 Safari 上经常被无视。
appearance: none 是起点，但不是万能解药
加了 appearance: none 才算真正开始自定义，但它只剥离系统样式，不解决结构限制。比如 select 的下拉箭头在 Safari 里必须用 ::-webkit-appearance: none + 额外伪元素模拟；Firefox 则要靠 background 图片盖掉原生箭头。
- 必须配合
-webkit-appearance: none、-moz-appearance: none、appearance: none三者写全，缺一不可 -
select加了appearance: none后，iOS Safari 仍可能保留灰色背景，得额外加background: white和-webkit-border-radius: 0 -
input[type="range"]的滑块完全不可选中，得用::-webkit-slider-thumb和::-moz-range-thumb单独重置
哪些控件根本没法“纯 CSS 重置”
input[type="date"]、input[type="time"]、input[type="color"] 属于硬核禁区：它们没有标准伪元素接口，也不能用 appearance: none 暴露内部结构。Chrome 允许部分样式（如 padding），但 Safari 直接忽略所有非字体类样式。
- 真实项目中，这类控件建议用轻量级 JS 库（如
flatpickr）替换，而非硬刚 CSS - 如果必须用原生控件，只控制可安全覆盖的属性：
font-family、font-size、color、cursor，其余一律设为inherit避免意外 -
textarea看似简单，但resize行为在 Firefox 中无法用 CSS 完全禁用，得加resize: none+overflow: auto防止内容溢出不可见
reset 后还要手动补齐的“隐形坑”
重置外观后，很多原本由系统兜底的行为就没了：聚焦轮廓、键盘导航、高对比度模式适配、屏幕阅读器语义……这些不会因为样式重置自动消失，反而更容易出问题。
立即学习“前端免费学习笔记（深入）”；
-
outline: none必须搭配:focus-visible使用，否则键盘用户会彻底迷失焦点位置 -
select移除原生箭头后，得手动加padding-right给自定义图标留空间，否则文字被截断 - 所有重置后的
input都要显式声明line-height，否则在 Windows Chrome 下和文字对不齐
