使用:focus伪类可实现输入框聚焦效果，通过自定义边框、阴影和过渡动画提升用户体验，同时需确保可访问性。
当用户点击或使用Tab键切换到某个输入框时，我们通常希望给一个明显的视觉反馈，这就是“聚焦效果”。用CSS可以轻松实现这一交互细节，提升用户体验。
使用:focus伪类设置基础聚焦样式
每个表单输入框（如input、textarea）都可以通过 :focus 伪类来定义获得焦点时的样式。这是实现聚焦效果的核心方法。
例如，改变边框颜色和添加阴影：
input:focus {
border-color: #007bff;
outline: none; /* 去除浏览器默认轮廓 */
box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}
自定义轮廓（outline）提升美观度
浏览器默认会给聚焦元素加上蓝色轮廓，但可能与设计风格不符。你可以将其去除并替换为更符合UI的样式。
立即学习“前端免费学习笔记（深入）”；
注意：去除轮廓后必须提供其他明显聚焦提示，否则影响可访问性。
input:focus {
outline: none;
border: 2px solid #0056b3;
box-shadow: 0 0 8px #007bff;
}
配合过渡动画让效果更自然
加入 transition 可以让边框、阴影等样式的改变更加平滑，避免突兀跳变。
推荐对常用属性添加过渡效果：
input {
border: 1px solid #ccc;
padding: 10px;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
<p>input:focus {
border-color: #007bff;
box-shadow: 0 0 10px rgba(0, 123, 255, 0.3);
}</p>针对不同输入状态细化样式
你还可以结合 :valid、:invalid 等伪类，在聚焦的同时反映输入内容是否合规。
例如，仅在聚焦且输入无效时显示红色边框：
input:invalid:focus {
border-color: #dc3545;
box-shadow: 0 0 5px rgba(220, 53, 69, 0.3);
}
基本上就这些。通过:focus配合边框、阴影和过渡，就能做出清晰又美观的输入框聚焦效果。关键是保持视觉反馈明确，同时不破坏可用性。
