在网页表单设计中，输入框的聚焦状态是引导用户操作的重要视觉反馈，默认的浏览器聚焦样式通常比较单调，很多时候需要开发者自定义符合整体设计风格的聚焦效果，css伪类:focus就是实现这一需求的核心工具。
什么是:focus伪类
:focus是css中的动态伪类，当元素获得焦点时会被触发，常见的可聚焦元素包括输入框、按钮、链接等，本文主要围绕输入框的:focus样式展开说明。
它的触发场景主要有以下几种：
- 用户点击输入框使输入框获得焦点
- 用户通过键盘Tab键切换到输入框
- 通过js调用元素的
focus()方法使元素获得焦点
基础输入框聚焦样式实现
要实现输入框的聚焦样式，只需要给输入框元素设置:focus伪类选择器，在里面编写需要的样式规则即可，下面是一个最基础的示例：
/* 输入框默认样式 */
input[type="text"] {
width: 300px;
height: 40px;
padding: 0 12px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 14px;
outline: none; /* 先移除浏览器默认的聚焦轮廓 */
transition: all 0.3s ease; /* 添加过渡效果让样式变化更平滑 */
}
/* 输入框聚焦时的样式 */
input[type="text"]:focus {
border-color: #409eff; /* 边框颜色变为蓝色 */
background-color: #f0f8ff; /* 背景色变为浅蓝 */
box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2); /* 添加外发光效果 */
}
对应的html结构如下：
<input type="text" placeholder="请输入用户名">
上面的代码中先移除了浏览器默认的outline轮廓，再自定义了边框颜色、背景色和阴影效果，同时添加了过渡动画，让聚焦样式的变化更自然。
常见聚焦样式场景扩展
带图标的输入框聚焦效果
很多输入框会搭配前置图标，聚焦时可以同步改变图标的颜色，实现更统一的交互反馈：
.input-wrap {
position: relative;
width: 300px;
}
.input-wrap input {
width: 100%;
height: 40px;
padding: 0 12px 0 36px;
border: 1px solid #ddd;
border-radius: 4px;
outline: none;
transition: border-color 0.3s;
}
.input-wrap .icon {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
color: #999;
transition: color 0.3s;
}
/* 输入框聚焦时，同时改变输入框边框和图标颜色 */
.input-wrap input:focus {
border-color: #409eff;
}
.input-wrap input:focus + .icon {
color: #409eff;
}
<div class="input-wrap">
<input type="text" placeholder="请输入搜索内容">
<span class="icon">🔍</span>
</div>
无效输入状态的聚焦提示
当输入框内容不符合校验规则时，聚焦可以展示错误提示样式：
input.error {
border-color: #f56c6c;
}
input.error:focus {
border-color: #f56c6c;
box-shadow: 0 0 0 2px rgba(245, 108, 108, 0.2);
}
<input type="text" class="error" placeholder="请输入正确的手机号">
注意事项
- 不要直接移除
outline后不提供任何替代的聚焦样式，会导致键盘操作用户无法感知当前聚焦位置，不符合无障碍访问要求 - 如果页面中有多个不同类型的输入框，建议先写通用的
:focus样式，再针对特殊输入框写覆盖规则，减少重复代码 :focus伪类的优先级高于元素默认样式，但是低于行内样式，编写样式时注意选择器的优先级问题- 部分旧版本浏览器对
:focus伪类的支持存在差异，如果需要兼容非常旧的浏览器，可以搭配js的focus和blur事件作为兜底方案
完整示例
下面是一个包含多种输入框聚焦效果的完整示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>输入框聚焦样式示例</title>
<style>
.container {
width: 500px;
margin: 50px auto;
padding: 20px;
}
.form-item {
margin-bottom: 20px;
}
.form-item label {
display: block;
margin-bottom: 8px;
font-size: 14px;
color: #333;
}
.form-item input {
width: 100%;
height: 40px;
padding: 0 12px;
border: 1px solid #ddd;
border-radius: 4px;
outline: none;
transition: all 0.3s ease;
box-sizing: border-box;
}
.form-item input:focus {
border-color: #409eff;
box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}
.form-item input.error:focus {
border-color: #f56c6c;
box-shadow: 0 0 0 2px rgba(245, 108, 108, 0.2);
}
</style>
</head>
<body>
<div class="container">
<div class="form-item">
<label>用户名</label>
<input type="text" placeholder="请输入用户名">
</div>
<div class="form-item">
<label>手机号</label>
<input type="text" class="error" placeholder="请输入正确的手机号">
</div>
</div>
</body>
</html>