normalize.css无法统一表单样式，因其仅修复语义层差异，对input[type="number"]、select、textarea等原生控件的渲染差异无能为力，需手动重置并显式定义视觉层。
直接用 normalize.css 不足以统一表单样式——它只修复语义层差异，对 input[type="number"]、select、textarea 这些原生控件的渲染差异无能为力。必须手动重置 + 显式定义视觉层。
为什么 normalize.css 后表单还是长得不一样
normalize.css 保证了 h1～h6 的缩放比例一致、pre 换行行为统一、button 垂直对齐可靠，但它不碰浏览器对表单控件的“私有渲染逻辑”：
-
input[type="number"]在 Safari 右侧带增减按钮，Chrome 默认没有，Firefox 则可能显示为纯文本框 -
select的下拉箭头在 Chrome 和 Safari 渲染位置/大小不同，仅靠appearance: none无法完全隐藏（尤其旧版 WebKit） -
textarea在 Firefox 默认可拖拽右下角，Chrome/Safari 虽也支持但尺寸计算逻辑不一致 -
button的默认padding和line-height在各浏览器中仍有 1–2px 偏差
appearance: none 必须配全三端前缀
只写 appearance: none 是无效的——Safari 需要 -webkit-appearance，Firefox 需要 -moz-appearance，否则原生控件（比如 select 箭头、input[type="date"] 日历图标）会残留或错位：
input, select, textarea, button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
注意：appearance: none 后必须显式设置 padding、border、font 和 line-height，否则控件会塌陷或文字错位。例如 select 清掉原生样式后，若没设 padding，文字会紧贴左边边框。
立即学习“前端免费学习笔记（深入）”；
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
select 下拉箭头必须用 background-image 或伪元素补全
清掉原生样式后，select 右侧会留白或显示残影。不能依赖框架自带的箭头图，要自己注入 SVG：
.form-select {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l2 2 2-2'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right 0.75rem center;
background-size: 1em;
}
关键点：
- SVG 必须 URL 编码，否则 Safari 解析失败
-
background-position要结合padding-right计算，否则在高 DPI 屏幕上偏移 - 别用
::after模拟箭头——select的伪元素支持极差，Firefox 完全不渲染
:invalid 和 :user-invalid 必须同时用
Chrome 在输入时实时触发 :invalid，Safari 要到表单提交才触发；仅靠 :invalid 会导致错误提示延迟或缺失。必须叠加 :user-invalid：
input:invalid,
input:user-invalid {
border-color: var(--input-border-color-error, #ef4444);
color: #ef4444;
}
input:required:invalid {
box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2);
}
注意：:user-invalid 在 Safari 16.4+、Chrome 109+、Edge 105+ 支持良好，但 IE 完全不支持——如需兼容 IE，得 fallback 到 JS 标记 class。
最易被忽略的是 fieldset[disabled]：它会让内部所有控件失效，但子元素 **不会匹配 :disabled**，所以禁用样式必须单独作用于 fieldset[disabled] input 这类选择器，而不是只写 input:disabled。
