统一表单样式需先归零再重建，显式声明box-sizing、font-family、margin；type="date"等控件需按引擎特性差异化处理；隐藏原生控件须保障无障碍；:focus和验证状态应兼顾可访问性与跨浏览器一致性。
不同浏览器对 input 的默认渲染差异不是“样式没写好”，而是各引擎（WebKit/Blink/Gecko）根本没打算统一——直接加 border 或 padding 反而容易触发 Safari 对 input[type="date"] 的内边距异常、Firefox 对 textarea 的 resize 行为错乱。统一的关键是「先归零，再重建」。
重置所有表单控件的默认盒模型和字体
不重置就加样式，等于在流沙上盖楼。尤其注意三个被忽略的点：
-
box-sizing: border-box必须显式声明，否则padding会让控件宽度超出容器（iOS Safari 最明显） -
font-family: inherit而非system-ui，避免旧版 Edge 把输入框字体硬切到系统默认，导致行高计算崩坏 -
margin: 0不能省——Chrome 默认有margin-top，Firefox 却没有，父子容器对齐会偏移
推荐基础重置块：
input, select, textarea, button {
margin: 0;
padding: 0.5rem;
border: 1px solid #ccc;
font-family: inherit;
font-size: 1rem;
line-height: 1.4;
box-sizing: border-box;
}
处理 type="date" 等原生控件的不可控性
appearance: none 在 Safari 上会直接禁用日期弹窗，不是 bug，是 WebKit 的设计限制。所以不能一刀切。
- 只对 Chrome/Safari/Edge 隐藏箭头：
::-webkit-calendar-picker-indicator+ 自定义 SVG 图标 - 对 Firefox 用
appearance: none+background模拟统一背景，但必须保留valueAsDate获取逻辑，别依赖input.value字符串解析 - 未选日期时 Firefox 显示空白，Chrome 显示
YYYY-MM-DD，这不是错误——用 JS 初始化input.value = ""并加 class 控制占位视觉即可
自定义 select / checkbox 时保交互无障碍
把 input[type="checkbox"] 设成 display: none 是最常见失能操作：Tab 键跳过、空格键无效、屏幕阅读器读不到状态。
- 改用
position: absolute; opacity: 0; pointer-events: none隐藏原生控件 - 新样式必须包裹在
label内，或通过for属性关联，确保点击区域可聚焦、可键盘操作 -
select箭头替换后，务必保留::-ms-expand兼容旧版 Edge（内网系统仍有大量存量）
聚焦与验证状态的跨浏览器一致性
:focus 下的 outline 在各浏览器表现分裂严重，但直接设 outline: none 会破坏可访问性。
- 用
outline: 2px solid #007bff; outline-offset: 2px;替代纯边框高亮，既保持焦点可见性，又规避 Safari 的 outline 渲染抖动 - 验证状态优先用
:user-invalid伪类，比 JS 手动加 class 更可靠；配合form.reportValidity()触发，避免 Firefox 不响应:invalid - 密码强度提示层位置飘移？别靠 CSS 定位，用
getBoundingClientRect()动态计算输入框坐标，尤其防刘海屏裁切
真正难的不是写出一致的样式，而是判断哪些地方必须让步给浏览器原生行为——比如 input[type="date"] 的弹出时机、textarea 的 resize 手柄位置。强行覆盖，只会换来更隐蔽的兼容性债。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
