CSS表单默认样式跨浏览器重置_编写Normalize.css规范样式

直接用 reset.css 会搞崩表单，因其粗暴清零表单元素的 border、padding、font，而各浏览器原生渲染差异大；Normalize.css 则收敛而非清零，保留可用默认行为，仅修正明显不一致处。

为什么直接使用 reset.css 会导致表单崩坏

因为多数老式 reset.css（比如 Eric Meyer 版）粗暴地把 input、select、textarea 的 border、padding、font 全设为 0 或 inherit，而不同浏览器对表单控件的默认渲染逻辑差异极大——Chrome 用系统原生控件，Firefox 有自己一套伪元素，Safari 在 macOS 上还带阴影和圆角。一重置，date 输入框变细条，checkbox 消失，select 下拉箭头错位，全乱。

Normalize.css 针对表单采取了哪些折中处理

它没“清零”，而是做收敛：保留各浏览器可读、可用的默认行为，只修正明显不一致的地方。比如统一 input[type="search"] 的 appearance，修复 Safari 中 textarea 的 resize 行为，让 button 在 IE 和 Chrome 下都响应 cursor: pointer。但它不碰 input[type="range"] 的轨道样式、不标准化 file 按钮的结构——因为这些本就该由开发者主动控制。

• normalize.css 不重置 appearance 到 none，仅在必要情况下设置为 revert 或 auto
• 它会保留 input 的 line-height 继承关系，防止文字遭到截断
• 对 fieldset 和 legend 只做最低限度的归一处理，但不会隐藏 legend（许多 reset 会设置 display: none）

真正需要手动重置的三个表单节点

Normalize 仅是基线，并非最终方案。下面三处 CSS 必须自行补充，否则可能出现移动端点击区域过小、高对比度模式下内容不可读，以及辅助技术无法识别的问题：

• input、select、textarea：显式声明 min-height（如 min-height: 1.5em），防止 Safari 自动压缩高度
• input[type="checkbox"] 和 input[type="radio"]：必须采用 accent-color 或使用自定义伪元素，不能依赖浏览器默认颜色，特别是在深色模式下
• button：把 border 重置为 1px solid currentColor，同时确保 :focus-visible 具备清楚的轮廓（不要使用 outline: none）

示例：

button { border: 1px solid currentColor; }<br>input, select, textarea { min-height: 1.5em; }

立即学习“前端免费学习笔记（深入）”；

移动端表单重置中最容易遗漏的兼容问题

iOS Safari 对 input[type="number"] 和 input[type="date"] 会强制插入上下微调按钮（appearance: spinbutton），Android Chrome 则不会；同时，所有移动端浏览器默认禁用用户缩放（user-scalable=no），导致 font-size: 16px 以下的文字无法被双指放大。这些都不是 Normalize 能覆盖的。

• 用 input::-webkit-inner-spin-button 和 input::-webkit-calendar-picker-indicator 隐藏 iOS 微调/日历图标（仅 WebKit）
• 为 input 和 textarea 添加 font-size: 16px，否则 iOS 可能会触发自动缩放
• 别给 select 设 background-image 替换下拉箭头后忘了加 padding-right，否则文字顶到边缘

衡量表单样式的标准不是有多“干净”，而是是否足够“可控”。Normalize 给出的只是底线共识，真正的重置仍要落实到具体输入类型、交互状态和设备能力；任何一环被遗漏，都可能让用户在某个场景中受阻。