normalize.css + appearance: none 组合可解决95%表单跨浏览器外观不一致问题；通配符重置无效且埋雷，reset.css会破坏交互细节；需按顺序加载normalize.css、显式设appearance与box-sizing，并补全cursor、user-select、resize及:disabled样式。
直接用 normalize.css + appearance: none 组合，就能解决 95% 的表单跨浏览器外观不一致问题；手写 * { margin: 0; padding: 0; } 不仅无效，还会让 input、select、textarea 更难调。
为什么不能靠通配符或 reset.css 统一表单样式
通配符重置对表单元素基本没用，还埋雷：
-
* { margin: 0; padding: 0; }完全不影响input的border、background、font-family，这些才是导致 Chrome/Safari 表单看起来“一个胖一个瘦”的主因 -
reset.css（如 Meyer 版）会把button的vertical-align、input[type="number"]的上下箭头、textarea的默认resize全部干掉，你得手动补全所有交互细节 - 更隐蔽的是：伪元素如
select::after在appearance: none后根本不会渲染，指望它加自定义箭头？必须套 wrapper 才行
真正起效的两步法：normalize.css + appearance 清理
normalize.css 解决底层行为差异，appearance 解决视觉层污染：
- 把
normalize.css放在所有自定义 CSS 之前加载，确保button { font-family: inherit; }这类修复生效——否则 macOS 和 Windows 下按钮字体宽度差 1–2px，浮动布局临界时直接换行 - 对目标表单元素显式设置：
-webkit-appearance: none;、-moz-appearance: none;、appearance: none;，三者缺一不可（Safari 15.4+ 要求appearance，Firefox 89+ 才支持无前缀版） - 紧接着必须补上
box-sizing: border-box;，否则padding会撑宽input，尤其在 flex 容器里容易溢出
表单元素重置时最容易漏掉的 4 个细节
光清掉原生样式还不够，以下四点不处理，照样在 iOS 或旧 Edge 上出问题：
-
cursor: pointer必须加在select和button上，否则 Safari 某些版本点击无反馈 -
user-select: none要加在自定义复选框/单选框的label上，防止双击误选文字 -
textarea需额外加resize: vertical;或resize: none;，否则 Chrome 默认可拖拽，Safari 默认禁用，行为不一致 -
:disabled状态必须单独写，比如opacity: 0.6; cursor: not-allowed;，否则 Firefox 下 disabled input 仍显示手型光标
最常被忽略的其实是顺序：如果你把自定义表单 CSS 放在 normalize.css 前面，那 normalize.css 里修复的 input:focus 逻辑可能就被覆盖了——DevTools 里看不见报错，但焦点样式就是不生效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
