:focus伪类用于定义获取焦点元素的样式，常见于input等表单控件，用户点击或键盘操作时触发，可通过改变边框颜色、宽度或添加阴影提升交互体验，结合transition和box-shadow可实现平滑发光效果，增强视觉反馈同时保障可访问性。
当用户点击或使用Tab键选中输入框时，输入框会进入聚焦（focus）状态。利用CSS的:focus伪类，可以轻松自定义该状态下的样式，比如改变边框颜色、宽度或添加阴影效果，从而提升表单的交互体验。
什么是:focus伪类？
:focus是CSS中的一个动态伪类，用于匹配获取焦点的元素。常见于表单控件如input、textarea、button等。一旦用户通过鼠标点击或键盘操作选中某个输入框，:focus规则就会生效。
使用:focus改变输入框边框样式
可以通过设置border属性来突出显示当前正在输入的字段。以下是一些常用方式：
- 改变边框颜色：让聚焦状态更明显
- 增加边框宽度：增强视觉反馈
- 使用outline替代或配合border：避免布局偏移
input:focus {
border: 2px solid #007bff;
outline: none; /* 去除浏览器默认外框 */
}
上面代码会让输入框在聚焦时显示蓝色边框，并去除系统默认的描边（outline），使样式更统一。
提升用户体验的小技巧
除了修改边框，还可以结合其他CSS属性进一步优化视觉效果：
- 添加box-shadow创建“发光”效果，突出当前操作区域
- 过渡动画（transition）让样式变化更平滑
- 确保可访问性：不要完全移除焦点样式，以免影响键盘用户
input {
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
transition: all 0.3s ease;
}
<p>input:focus {
border-color: #007bff;
box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
outline: none;
}</p>
这段样式加入了圆角、内边距和过渡效果，聚焦时边框变蓝并伴有轻微阴影，整体更现代且友好。
基本上就这些。合理使用:focus不仅能美化界面，还能帮助用户更好理解当前操作位置，尤其在复杂表单中尤为重要。注意保持焦点样式的可见性，以兼顾所有用户群体的操作体验。不复杂但容易忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
