在表单交互里，当用户点击输入框或用键盘切换焦点时，让输入框有明显的高亮反馈，可以提升可用性和体验。CSS的:focus伪类正是用来选中当前获得焦点的元素，我们通常用它调整边框和阴影来实现高亮。
什么是:focus伪类
:focus是CSS伪类选择器，匹配当前获得键盘或鼠标焦点的元素，常见用于input、textarea、button等。当元素被聚焦，:focus里的样式就会生效。
用:focus调整边框实现高亮
最基础的做法是改变边框颜色与宽度，让用户清楚看到当前在哪一个输入框。
/* 默认输入框样式 */
input {
border: 1px solid #ccc;
padding: 8px;
outline: none; /* 去掉浏览器默认轮廓，自行控制 */
}
/* 聚焦时改变边框 */
input:focus {
border: 2px solid #2d8cf0;
}
用:focus添加阴影增强反馈
除了边框，使用box-shadow能做出柔和的发光效果，视觉上更舒服。
input:focus {
border: 2px solid #2d8cf0;
box-shadow: 0 0 6px rgba(45, 140, 240, 0.5);
}
完整示例
下面给出一个简单页面，包含默认与聚焦两种状态的输入框。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
.field {
width: 240px;
padding: 8px;
border: 1px solid #ccc;
outline: none;
transition: all 0.2s;
}
.field:focus {
border: 2px solid #2d8cf0;
box-shadow: 0 0 6px rgba(45, 140, 240, 0.5);
}
</style>
</head>
<body>
<p>用户名：<input class="field" type="text"></p>
<p>密码：<input class="field" type="password"></p>
</body>
</html>
注意事项
- 设置outline:none时要自行提供明显的高亮样式，否则键盘用户可能难以感知焦点。
- transition属性能让边框和阴影变化更平滑。
- 若使用第三方组件，注意其自身:focus样式优先级，可用更高优先级选择器覆盖。
通过:focus伪类调整边框与阴影，是用纯CSS实现输入框高亮的简单有效方案，适合大多数后台与官网表单场景。