应统一重置表单元素默认样式，使用属性选择器批量初始化input、select、textarea及[type="number"]等，设置margin、padding、border、font-family、font-size和box-sizing；聚焦时移除outline并高亮边框；自定义select箭头宜用background SVG叠加并保留原生结构；checkbox/radio需隐藏但保留交互能力；验证推荐:user-invalid伪类+form.reportValidity()组合方案。
表单元素默认样式不统一，怎么强制重置
浏览器对 <input>、<select></select>、<textarea></textarea> 的默认边框、内边距、字体甚至聚焦轮廓（outline）各不相同。不重置就直接写样式，结果在 Chrome 看正常，到 Safari 里下拉箭头错位，Firefox 里 textarea 拉伸行为异常。
实操建议：用属性选择器批量初始化，别漏掉 [type="number"] 这类容易被忽略的类型：
input,
select,
textarea {
margin: 0;
padding: 0.5rem;
border: 1px solid #ccc;
font-family: inherit;
font-size: 1rem;
box-sizing: border-box;
}
input:focus,
select:focus,
textarea:focus {
outline: none;
border-color: #007bff;
}
注意：box-sizing: border-box 必须加，否则 padding 会让控件宽度超出容器；font-family: inherit 能避免某些浏览器（如旧版 Edge）把表单字体硬切到系统默认。
自定义 select 下拉箭头太难搞，有没有轻量解法
原生 select 的箭头无法用 CSS 直接替换，强行用 appearance: none 后，Firefox 不支持，Safari 在 macOS 上会丢失可访问性语义。
立即学习“前端免费学习笔记（深入）”；
更稳的做法是保留原生结构，只覆盖视觉箭头：
- 用
background叠加自定义 SVG 箭头，同时设置padding-right避免文字遮挡 - 加
pointer-events: none到伪元素上，确保点击区域仍有效 - 必须保留
select::-ms-expand兼容 IE/Edge Legacy（虽然已淘汰，但内网系统还常见）
示例关键片段：
select {
background: url("data:image/svg+xml,%3Csvg...%3E") no-repeat right 0.5rem center / 1em auto;
padding-right: 2rem;
}
select::-ms-expand {
display: none;
}
input[type="checkbox"] 和 radio 样式重写后失去键盘操作
很多人用 display: none 隐藏原生控件，再用 ::before/::after 画新样式——这会导致 Tab 键无法聚焦、空格键无法切换，屏幕阅读器也读不到状态。
正确路径是「隐藏但不移除交互能力」：
- 用
position: absolute; opacity: 0; pointer-events: none替代display: none - 新样式用
label包裹原生input，或通过for属性关联，确保点击 label 能触发 input - 用
:checked+~或+选择器控制后续元素样式，而不是 JS 模拟状态
这样键盘焦点仍在 input 上，Enter/Space 正常响应，无障碍检测工具也能识别。
表单验证错误提示位置和时机总出问题
用 :invalid 伪类做实时提示，用户一进页面就看到红边框；用 JS 的 reportValidity() 又得手动绑定所有提交逻辑，漏一个按钮就失效。
推荐组合策略：
- 初始状态不触发校验，靠
:user-invalid（Chrome 102+、Firefox 103+ 支持）只对用户修改过的字段生效 - 提交时统一调用
form.reportValidity()，它会自动触发所有字段的原生验证，并滚动到第一个错误项 - 错误文案别写死在 HTML 里，用
setCustomValidity()动态控制，比如邮箱格式错误时提示「邮箱格式不对」，为空时提示「请填写邮箱」
兼容老浏览器？退回到监听 blur 和 submit 事件，但记得给每个 input 加 required 或 pattern，否则 :invalid 不生效。
最易被忽略的是：表单内嵌了 iframe 或第三方组件（比如验证码），它们可能拦截 submit 事件，导致 reportValidity() 完全不执行——这种时候得在 JS 提交逻辑开头手动补一句校验。
