css表单输入框聚焦高亮怎么办_使用focus伪类增强可用性

表单输入框聚焦高亮应使用:focus伪类，通过border、box-shadow和transition实现视觉反馈，同时用:focus-visible或统一outline保障键盘可访问性；:focus-within可扩展至容器级高亮。

给表单输入框添加聚焦高亮，核心是用 :focus 伪类设置边框、阴影或背景等视觉反馈，让用户清楚当前操作的是哪个字段。

基础聚焦样式：边框与阴影

默认情况下，多数浏览器会在输入框获得焦点时显示一个细虚线轮廓（outline），但不够明显且风格不统一。建议用 border 和 box-shadow 替代或增强：

• 移除默认 outline：添加 outline: none;（注意需保留键盘可访问性，见下文）
• 加粗或变色边框：border: 2px solid #4d90fe;
• 添加柔和阴影提升层次感：box-shadow: 0 0 5px rgba(77, 144, 254, 0.3);

保持可访问性：别丢掉键盘用户的提示

完全去掉 outline 可能影响键盘 Tab 导航体验。更稳妥的做法是「替换」而非「删除」：

• 保留 outline，但仅在键盘聚焦时显示：input:focus:not(:focus-visible) { outline: none; }
• 或统一用自定义样式覆盖：input:focus { outline: 2px solid #4d90fe; outline-offset: 2px; }
• 确保对比度达标（至少 4.5:1），方便视障用户识别

配合过渡效果让交互更自然

突兀的样式切换会显得生硬。加上 transition 让高亮渐变出现：

• transition: border-color 0.2s ease, box-shadow 0.2s ease;
• 推荐写在非聚焦状态上（即初始样式），避免重复声明
• 所有可交互表单控件（textarea、select、button）都建议统一处理

进阶：结合 :focus-within 实现容器高亮

当输入框嵌套在标签或卡片内时，想让整个容器响应聚焦，可用 :focus-within：

• .form-group:focus-within { background-color: #f8f9fa; border-left: 3px solid #4d90fe; }
• 适用于带图标、说明文字或错误提示的复合表单项
• 兼容性良好（Chrome 60+、Firefox 61+、Edge 79+，Safari 15.4+）