统一表单样式需重置默认外观：用appearance:none及前缀清除原生样式，显式设置border/padding/font；select需自定义下拉图标；placeholder用全前缀设色；错误状态同步outline与文案；移动端checkbox/radio用label包裹扩大点击区。
表单元素默认样式不一致，怎么统一？
浏览器对 <input>、<select>、<textarea> 的默认边框、圆角、内边距、字体大小都不一样，尤其 <select> 在 Safari 和 Chrome 里连下拉箭头位置都不同。直接写 border: 1px solid #ccc 不够，得先重置。
- 用
appearance: none 干掉原生样式（注意加 -webkit-appearance 和 -moz-appearance 前缀）
- 显式设置
border、padding、font、line-height，别依赖继承
-
<select> 需额外加 background 模拟下拉图标，或用伪元素覆盖（但 iOS Safari 对 ::after 在 <select> 上支持差）
placeholder 文字颜色太浅，用户看不清::placeholder 伪元素默认灰得发白，尤其在浅背景上。不是所有浏览器都支持同一套写法。
- 必须写全前缀：
::placeholder、::-webkit-input-placeholder、::-moz-placeholder、:-ms-input-placeholder
- 颜色别用
#999，改用 #666 或带点饱和度的灰（如 #5a5a5a）
- 注意：设了
color 后，如果父容器有 opacity 或 filter，placeholder 会更淡，容易误判为失效
表单验证失败时的错误提示总被忽略:invalid 和 :user-invalid 是关键，但只靠它们变红边框远远不够。用户根本不知道哪里错了，也不知道怎么改。
- 别只改
border-color，同步加 outline: 2px solid #e74c3c（避免焦点丢失）
- 错误文案必须用
<span class="error"> 插在对应 <input> 之后，且 display: block
-
required 字段没填就提交，Chrome 会弹原生气泡，但气泡位置不可控、无法本地化；建议用 setCustomValidity() + reportValidity() 主动接管
移动端点击区域太小，手指总点不准<input type="checkbox"> 和 <input type="radio"> 默认尺寸在手机上只有 12×12px，远低于 44×44px 的触控安全区。
- 给
input 设 width: 0; height: 0; opacity: 0;，再用 label 包裹它，并给 label::before 画自定义勾选框
- 确保
label 的 padding 至少 12px，整体点击区 ≥ 44px
- iOS Safari 对
label[for] 关联 checkbox 的响应有延迟，直接包裹更稳
appearance: none 干掉原生样式（注意加 -webkit-appearance 和 -moz-appearance 前缀）border、padding、font、line-height，别依赖继承<select> 需额外加 background 模拟下拉图标，或用伪元素覆盖（但 iOS Safari 对 ::after 在 <select> 上支持差）::placeholder 伪元素默认灰得发白，尤其在浅背景上。不是所有浏览器都支持同一套写法。
- 必须写全前缀：
::placeholder、::-webkit-input-placeholder、::-moz-placeholder、:-ms-input-placeholder - 颜色别用
#999，改用#666或带点饱和度的灰（如#5a5a5a） - 注意：设了
color后，如果父容器有opacity或filter，placeholder 会更淡，容易误判为失效
表单验证失败时的错误提示总被忽略:invalid 和 :user-invalid 是关键，但只靠它们变红边框远远不够。用户根本不知道哪里错了，也不知道怎么改。
- 别只改
border-color，同步加 outline: 2px solid #e74c3c（避免焦点丢失）
- 错误文案必须用
<span class="error"> 插在对应 <input> 之后，且 display: block
-
required 字段没填就提交，Chrome 会弹原生气泡，但气泡位置不可控、无法本地化；建议用 setCustomValidity() + reportValidity() 主动接管
移动端点击区域太小，手指总点不准<input type="checkbox"> 和 <input type="radio"> 默认尺寸在手机上只有 12×12px，远低于 44×44px 的触控安全区。
- 给
input 设 width: 0; height: 0; opacity: 0;，再用 label 包裹它，并给 label::before 画自定义勾选框
- 确保
label 的 padding 至少 12px，整体点击区 ≥ 44px
- iOS Safari 对
label[for] 关联 checkbox 的响应有延迟，直接包裹更稳
border-color，同步加 outline: 2px solid #e74c3c（避免焦点丢失）<span class="error"> 插在对应 <input> 之后，且 display: block
required 字段没填就提交，Chrome 会弹原生气泡，但气泡位置不可控、无法本地化；建议用 setCustomValidity() + reportValidity() 主动接管<input type="checkbox"> 和 <input type="radio"> 默认尺寸在手机上只有 12×12px，远低于 44×44px 的触控安全区。
- 给
input设width: 0; height: 0; opacity: 0;，再用label包裹它，并给label::before画自定义勾选框 - 确保
label的padding至少 12px，整体点击区 ≥ 44px - iOS Safari 对
label[for]关联 checkbox 的响应有延迟，直接包裹更稳
表单样式真正难的不是“怎么好看”，而是“怎么让每个字段在每种设备、每种输入状态下，行为都可预期”。比如一个 type="number" 在 Android 上长按会触发滚轮，但在桌面端是上下箭头——这些交互细节，光靠 CSS 压不住。
