直接写 input, select, textarea { ... } 会因浏览器默认样式差异大、伪元素遗漏、可访问性破坏及影响自定义组件而引发问题；应分类型重置、保留焦点样式、用带前缀的 appearance: none 并限定作用域。
为什么直接写 input, select, textarea { ... } 会出问题
浏览器对表单控件的默认样式差异极大，比如 input[type="number] 在 Safari 里有加减按钮、Chrome 默认带阴影、Firefox 的 select 下拉箭头根本无法用 CSS 覆盖。单纯靠全局重置容易漏掉伪元素（如 ::-webkit-inner-spin-button）、破坏可访问性（移除 outline 又不提供替代焦点样式），或者意外影响自定义组件内部的表单元素。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 别用通配符重置，比如
* { margin: 0; }，它会干扰button的默认内边距和textarea的可缩放行为 - 避免一次性重置所有表单元素，应按控件类型分组处理，例如把
input[type="text"]和input[type="checkbox"]分开对待 - 必须保留
:focus-visible或至少:focus样式，否则键盘用户无法感知当前焦点位置
用 modern-normalize 还是自己写表单重置文件
modern-normalize 确实重置了部分表单样式，但它只做“最小必要归一化”，比如清除了 input 的默认边框圆角、统一了字体继承，但不会碰 select 的下拉图标、textarea 的 resize 手柄，更不会处理 appearance 兼容性。真要彻底控制外观，还是得自己维护一份轻量级表单重置文件。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 新建
form-reset.css，只包含你项目中实际用到的表单控件规则，比如项目不用color输入框，就别写input[type="color"]相关重置 - 优先使用
appearance: none，但必须紧跟厂商前缀：-webkit-appearance: none;、-moz-appearance: none; - 对
select，重置后需手动添加下拉箭头（用背景图或伪元素），否则视觉上会像“死掉的输入框”
appearance: none 在不同浏览器下的表现差异
这个属性是表单样式的开关钥匙，但各浏览器实现程度不同：Chrome 和 Edge 支持最全，Safari 对 select 的 appearance: none 仍会保留原生箭头（除非配合 background 遮盖），Firefox 则对 input[type="range"] 的支持较晚（100+ 版本才稳定）。不加兼容写法，很容易在某个浏览器里看到“一半自定义、一半原生”的诡异混合态。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 写
appearance必须带前缀，且顺序不能错：先-webkit-appearance，再-moz-appearance，最后appearance - 对
select，用background+padding-right挤出空间放自定义箭头，同时加text-indent防止文字被遮挡 - 测试时重点看 Safari —— 它最容易暴露
appearance漏写或前缀缺失的问题
引入外部表单重置文件的加载时机和作用域控制
如果把 form-reset.css 放在主样式表后面，它会被后续组件样式覆盖；放在前面又可能被 UI 框架（如 Bootstrap）的重置逻辑冲掉。更麻烦的是，某些第三方组件（比如富文本编辑器里的 textarea）依赖原生样式，全局重置会导致它们失常。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 在 HTML 中用
<link rel="stylesheet" href="form-reset.css" />，确保它位于所有框架样式之前、项目主样式之后 - 给需要重置的表单区域加一个容器类，比如
<form class="form-reset">，然后重置规则限定为.form-reset input, .form-reset select，避免污染全局 - Webpack/Vite 项目中，不要把
form-reset.cssimport 到 JS 里，否则可能因 CSS 提取顺序导致失效；直接通过 HTML link 引入最稳
真正难的不是写几行 appearance: none，而是判断哪些控件该重置、哪些该留白，以及什么时候该让步给屏幕阅读器的需求。样式越“干净”，越要小心别把语义和可用性一起删了。
