需重置input和textarea基础样式以统一跨浏览器表现，包括边框、内边距、字体，并用:focus-visible保障键盘用户可访问性，同时强化label语义关联与错误提示的可读性。
input 和 textarea 的基础样式重置
浏览器默认的 input 和 textarea 边框、内边距、字体不一致，直接美化前必须统一。否则在 Chrome、Safari、Firefox 中会出现高度错位、光标偏移等问题。
- 用
border: 1px solid #ccc替代默认outline和系统边框，避免聚焦时双线叠加 - 显式设置
padding: 8px 12px（注意左右 padding 要大于图标预留空间） - 加
box-sizing: border-box，确保 width 包含边框和 padding - 禁用
appearance: none（配合-webkit-appearance: none），否则 Safari 下下拉箭头无法隐藏
:focus-visible 与可访问性聚焦样式
只用 :focus 会让键盘用户失去视觉反馈，而全量加 :focus 又干扰鼠标用户。现代方案是用 :focus-visible —— 它只在真正需要键盘导航时生效。
- 先写
input:focus { outline: none }，再单独写input:focus-visible { outline: 2px solid #007bff; outline-offset: 2px } - 注意：旧版 Safari 不支持
:focus-visible，需搭配focus-ringpolyfill 或降级为:focus+outline微调 - 不要用
box-shadow模拟 focus ring，它不随系统高对比度模式变化，会破坏可访问性
label 与 input 的关联强化
表单可点击区域小、标签不可点击，是用户最常抱怨的体验问题。核心不是“看起来美”，而是“点哪都能输”。
- 给
label加display: block或inline-flex，让整个标签行可点击 - 确保每个
input都有对应id，且label[for]值严格匹配，否则点击 label 不触发 focus - 复选框/单选按钮建议用伪元素重绘：隐藏原生
input[type="checkbox"]，用label::before绘制自定义方框，再用input:checked + label::before切换状态
错误状态与实时验证提示
仅靠红色边框不足以传达错误，用户需要明确知道“哪里错了”和“怎么改”。CSS 能做的边界很清晰：响应 JS 设置的 class，不替代逻辑。
立即学习“前端免费学习笔记（深入）”；
- 约定 class 名如
is-invalid，配合input.is-invalid { border-color: #dc3545 }和.invalid-feedback { color: #dc3545; font-size: 0.875em; margin-top: 0.25rem } - 避免用
:invalid伪类做实时校验——它依赖required或type="email"等原生约束，但用户未输入时就触发，体验反常 - 错误提示文案必须用
<div class="invalid-feedback"> 插在对应 input 后，不能靠 <code>::after生成，否则屏幕阅读器无法读出 真实项目里最容易被跳过的，是label的语义绑定和:focus-visible的渐进增强处理——它们不炫技，但直接决定表单是否“能被所有人顺畅使用”。
