表单输入框聚焦高亮应使用: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+）
