:focus伪类是最标准可靠的输入框聚焦样式控制方式，支持边框、阴影等属性修改，需兼顾outline可访问性及transition平滑效果。
直接用 :focus 伪类就能控制输入框获得焦点时的样式，这是最标准、最可靠的方式。
基础写法：给 input 添加 focus 样式
只需在 CSS 中为 input（或具体类型如 input[type="text"]）添加 :focus 规则：
- 确保选择器能匹配到目标输入框，比如
input:focus、.form-input:focus或#search-box:focus - 可修改边框、背景、阴影、文字颜色等任意支持的属性，例如加个蓝色外发光：
box-shadow: 0 0 4px rgba(33, 150, 243, 0.5); - 注意浏览器默认会加 outline（虚线框），如需去掉可写
outline: none;，但建议同时提供其他视觉反馈，保证可访问性
增强体验：配合 transition 做平滑过渡
加上 transition 让样式变化更自然：
- 在正常状态（非 focus）里定义过渡属性，比如：
transition: border-color 0.2s, box-shadow 0.2s; - focus 状态中只改具体值，浏览器自动补间动画，避免“突兀跳变”
- 常用组合：边框变色 + 阴影出现 + 背景微调，既明显又不刺眼
注意事项：兼容性与可访问性
:focus 在所有现代浏览器中都支持，但要注意几点：
立即学习“前端免费学习笔记（深入）”；
- tab 键切换、鼠标点击、触屏点击都会触发 focus，行为一致
- 如果用了
outline: none却没提供替代样式，键盘用户将无法判断当前焦点位置，影响无障碍使用 - iOS Safari 默认会给聚焦的输入框放大，可通过
-webkit-text-size-adjust: 100%;和设置viewport缓解
基本上就这些。:focus 是原生、轻量、语义清晰的方案，不用 JS 就能搞定聚焦反馈，用对了效果很稳。
