在网页表单交互中，输入框获得焦点时显示高亮边框是提升用户体验的常用设计，这个效果可以通过CSS的:focus伪类轻松实现。:focus伪类用于匹配当前获得焦点的元素，我们可以为它定义专属的样式规则，覆盖元素默认的焦点状态表现。
:focus伪类的基本语法
:focus伪类属于CSS伪类选择器，不需要额外添加类名，直接通过元素选择器结合:focus即可生效，基础语法结构如下：
/* 选择所有获得焦点的input元素 */
input:focus {
样式属性: 属性值;
}
输入框聚焦高亮边框的实现步骤
1. 定义输入框基础样式
首先给输入框设置默认的边框样式，避免不同浏览器的默认样式差异影响最终效果：
/* 输入框基础样式 */
.input-base {
width: 300px;
height: 40px;
padding: 0 12px;
border: 1px solid #dcdfe6; /* 默认浅灰色边框 */
border-radius: 4px;
outline: none; /* 移除浏览器默认的聚焦轮廓 */
font-size: 14px;
transition: border-color 0.2s ease; /* 添加边框颜色过渡效果 */
}
2. 定义:focus伪类样式
在基础样式上，为输入框的:focus状态添加高亮边框相关的样式，这里以蓝色高亮边框为例：
/* 输入框聚焦时的高亮样式 */
.input-base:focus {
border-color: #409eff; /* 高亮边框颜色 */
box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2); /* 可选：添加外发光效果增强视觉提示 */
}
3. 完整HTML示例
将样式和HTML结构结合，即可看到完整的聚焦高亮效果：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>输入框聚焦高亮示例</title>
<style>
.input-base {
width: 300px;
height: 40px;
padding: 0 12px;
border: 1px solid #dcdfe6;
border-radius: 4px;
outline: none;
font-size: 14px;
transition: border-color 0.2s ease;
}
.input-base:focus {
border-color: #409eff;
box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}
</style>
</head>
<body>
<div class="form-item">
<label for="username">用户名：</label>
<input type="text" id="username" class="input-base" placeholder="请输入用户名">
</div>
</body>
</html>
常见注意事项
- 记得设置
outline: none移除浏览器默认的聚焦轮廓，否则可能会同时出现默认轮廓和自定义高亮边框，影响视觉效果。 - 如果项目需要兼容旧版本浏览器，可以确认:focus伪类的支持情况，主流现代浏览器都原生支持该伪类，无需额外处理。
- 高亮颜色建议和项目的主色调保持一致，外发光的透明度可以根据设计需求调整，避免过于刺眼。
- 除了输入框，
:focus伪类也可以用于<textarea>、<select>等其他可聚焦的表单元素，实现统一的交互效果。
扩展：不同场景的样式调整
如果需要针对不同类型的输入框设置不同的聚焦样式，可以通过类选择器或者属性选择器区分：
/* 密码输入框聚焦时使用橙色高亮 */
input[type="password"]:focus {
border-color: #e6a23c;
box-shadow: 0 0 0 2px rgba(230, 162, 60, 0.2);
}
/* 错误状态的输入框聚焦时使用红色高亮 */
.input-error:focus {
border-color: #f56c6c;
box-shadow: 0 0 0 2px rgba(245, 108, 108, 0.2);
}