根本原因是浏览器用户代理样式表对表单元素渲染逻辑不同：Safari加原生箭头灰底，Chrome默认圆角更大，Firefox使textarea拖拽柄偏移；appearance: none需配-webkit-和-moz-前缀，box-sizing: border-box须前置，精准重置input/select/textarea/button等元素而非通配符*。
为什么表单在Chrome和Safari里长得不一样
根本原因不是你CSS写错了，而是浏览器自带的“用户代理样式表”对 input、select、button 等元素做了不同渲染。比如 Safari 给 select 加了原生下拉箭头和灰底，Chrome 可能默认圆角更大，Firefox 甚至让 textarea 的 resize 拖拽柄位置偏移。不先清掉这些，后面加再多 border-radius 都是徒劳。
-
appearance: none是必加项，但必须配前缀：-webkit-appearance: none（Safari/iOS）、-moz-appearance: none（Firefox） - 只对
input和select加appearance不够——checkbox和radio必须用display: none配合label::before重绘，否则无法统一勾选图标 -
box-sizing: border-box要写在重置规则最前面，否则padding一加，width: 100%就会溢出容器
重置时该用 * 还是逐个选中表单元素
通配符 * 看起来省事，但实际会拖慢渲染——它强制浏览器遍历所有节点，包括 svg、picture 这类不需要重置的元素。更糟的是，* { outline: none } 会干掉所有焦点轮廓，破坏可访问性。
- 推荐精准重置：
input, select, textarea, button, fieldset, legend—— 这些才是表单相关元素 -
margin和padding重置要分层：父级form设margin: 0，子级控件设margin: 0+vertical-align: middle防止基线错位 - 字体继承必须显式写：
font-family: inherit，否则某些浏览器（如旧版 Edge）会 fallback 到系统等宽字体
focus 样式为什么总被忽略
很多开发者写了 input:focus { border-color: #007bff } 却没效果，常见原因是：原生 outline 没清除，或者 border 宽度在聚焦前后不一致（比如默认 border: 1px，聚焦时写成 border: 2px，导致布局抖动）。
- 必须同时写：
outline: none+border-color或box-shadow，不能只靠后者 - 聚焦状态要用
transition包裹，否则 Safari 下会出现卡顿；建议统一用transition: border-color 0.15s, box-shadow 0.15s - 禁用状态
:disabled的样式要单独定义，否则opacity: 0.6会让文字模糊，更稳妥的是background-color: #f5f5f5; color: #999; cursor: not-allowed
自定义 select 下拉箭头的实际坑
用 background-image 替换原生箭头看似简单，但 Safari 对 data URL 的 SVG 解析极不稳定，经常出现图标错位或完全不显示。
立即学习“前端免费学习笔记（深入）”；
- 优先用伪元素：
select::after配合position: absolute+right: 10px，再用content: "▼"或 SVG 字体 - 如果坚持用 background，SVG 必须 base64 编码且去掉换行和空格，否则 Firefox 会解析失败
- 移动端要注意：iOS 上
select点击会唤起原生选择器，自定义箭头仅在未激活时可见，别指望它参与交互
真正难的不是写出统一样式，而是让每个控件在禁用、聚焦、悬停、错误状态下的尺寸、颜色、过渡节奏全部对齐。这需要把 border-width、padding、line-height 全部抽成 CSS 变量，不然改一个地方就得全局搜三遍。
