不同浏览器对表单控件渲染标准不一，导致样式差异；需用 appearance: none 配合重绘、统一字体行高、box-sizing 等五条规则，并兼顾可访问性与响应式控制。
为什么 input 和 select 在不同浏览器里长得不一样
因为浏览器自带的表单控件（比如 input[type="text"]、select、textarea）根本没统一渲染标准。Chrome 用 WebKit 的原生控件逻辑，Firefox 有自己的 GTK/WinUI 映射，Safari 更激进——直接调系统原生控件。结果就是圆角、边框粗细、聚焦高亮色、甚至下拉箭头位置都可能差一截。
这不是 bug，是设计选择。CSS 框架要“覆盖”它，就得先承认：你没法靠改几个 border 或 padding 就搞定所有控件。
- 别试图只写
input { border: 1px solid #ccc; }—— Safari 下select的边框可能完全不响应 -
appearance: none是关键开关，但必须配合重绘（比如自定义下拉箭头），否则 Firefox 会留白一块 - 移动端 iOS 上
input[type="date"]根本不能被样式化，只能用 JS 库替代或隐藏原生控件
appearance: none 怎么用才不翻车
这是让浏览器放弃原生渲染、交出控制权的第一步。但它不是万能药，漏掉配套处理，反而会让表单更难用。
- 必须加
-webkit-appearance: none;和-moz-appearance: none;，仅写标准属性在旧版 Safari/Firefox 无效 - 用了
appearance: none后，select的下拉箭头会消失，得手动加background-image或伪元素模拟 - 某些安卓 WebView 对
appearance: none支持不稳定，建议配合background: none防止残留背景色 - 禁用后，
:focus样式必须显式定义，否则键盘用户无法感知焦点位置
框架里常见的「伪重置」陷阱
很多 CSS 框架（比如 Tailwind、Bootstrap）默认会重置表单样式，但它们的 reset 策略其实很粗糙——只清了 padding/border，却没碰 font、line-height、color 这些影响对齐的关键属性。
立即学习“前端免费学习笔记（深入）”；
-
font-family不统一会导致input和旁边文字高度错位，尤其在 flex 布局里 -
line-height缺失时，textarea的光标可能卡在顶部，输入内容视觉上“飘”起来 - 部分框架对
input[type="checkbox"]只加了accent-color，但没处理 iOS 上 checkbox 的缩放比例，导致点击热区过小 - 别信 “重置就完事了”，检查 devtools 里每个控件的 computed styles，重点看
box-sizing、vertical-align、min-height
真正跨浏览器一致的最小可行样式集
不用大框架也能稳住基本盘，关键是这 5 条规则必须成套出现，缺一不可：
input, select, textarea {
box-sizing: border-box;
font-family: system-ui, -apple-system, sans-serif;
font-size: 1rem;
line-height: 1.5;
padding: 0.5rem 0.75rem;
}
-
box-sizing: border-box防止边框和 padding 把控件撑大（尤其在 grid/flex 中） -
font-family必须包含system-ui和-apple-system，否则 Windows 和 macOS 字体渲染差异会暴露边框对不齐 -
line-height: 1.5是底线，低于这个值，textarea内容行距压缩，用户会误以为输入失败 - 所有 padding 值用 rem，避免缩放时像素错位；不要用
em，它会继承父级 font-size 导致失控 - 最后加一句
input:focus, select:focus, textarea:focus { outline: 2px solid #007bff; outline-offset: 2px; }—— 不是美化，是可访问性刚需
复杂点在于，一旦你开始支持暗色模式或动态字体缩放，这些值就得变成 CSS 变量 + @media (prefers-color-scheme) + @media (min-width) 组合控制。没人真会全手写，但得知道框架底层是不是这么干的。
