17370845950

: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 就能搞定聚焦反馈，用对了效果很稳。