什么是CSS :focus选择器
CSS的:focus是一个伪类选择器，用于选中当前获得焦点的元素，最常见的应用场景就是表单中的输入框、下拉框、按钮等可交互元素。当元素被用户点击、通过Tab键切换选中时，就会触发焦点状态，此时:focus对应的样式规则就会生效。
基础输入框焦点样式设置
我们先来看一个最基础的文本输入框，默认样式和焦点样式的对比实现。首先编写基础的HTML结构：
<form>
<div class="form-item">
<label for="username">用户名：</label>
<input type="text" id="username" placeholder="请输入用户名">
</div>
<div class="form-item">
<label for="password">密码：</label>
<input type="password" id="password" placeholder="请输入密码">
</div>
</form>
接下来编写对应的CSS样式，分别设置输入框的默认样式和:focus状态下的样式：
/* 基础输入框样式 */
input[type="text"],
input[type="password"] {
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,
input[type="password"]:focus {
border-color: #1677ff; /* 边框变为蓝色 */
background-color: #f0f7ff; /* 背景变为浅蓝色 */
box-shadow: 0 0 0 3px rgba(22, 119, 255, 0.2); /* 添加外发光阴影 */
}
上面的代码中，我们首先给输入框设置了默认的边框、内边距等基础样式，同时通过outline: none移除了浏览器自带的蓝色焦点轮廓，避免和自定义样式冲突。然后在:focus选择器中重新定义了边框颜色、背景色和外阴影，并且添加了过渡效果，让焦点状态的变化更自然。
不同输入框类型的焦点样式适配
除了普通的文本输入框，其他类型的输入框也可以适配:focus样式，比如多行文本域、下拉选择框等，下面是多行文本域的示例：
/* 多行文本域默认样式 */
textarea {
width: 300px;
height: 120px;
padding: 12px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 14px;
outline: none;
resize: vertical; /* 允许垂直方向调整高度 */
transition: all 0.3s ease;
}
/* 多行文本域焦点样式 */
textarea:focus {
border-color: #52c41a; /* 使用绿色区分不同输入框类型 */
background-color: #f6ffed;
box-shadow: 0 0 0 3px rgba(82, 196, 26, 0.2);
}
使用:focus选择器的注意事项
- 不要忘记移除浏览器默认的
outline样式，否则自定义的边框和阴影可能会和默认轮廓叠加，影响视觉效果。但移除后一定要提供足够明显的自定义焦点样式，否则键盘导航用户可能无法感知当前焦点位置。 - :focus选择器只对可获得焦点的元素生效，比如
<input>、<textarea>、<button>、<a>等，普通<div>元素默认无法获得焦点，如果需要让它支持焦点，需要添加tabindex属性。 - 如果需要让焦点样式在元素被点击后持续生效，或者实现点击外部关闭焦点的效果，可能需要结合JavaScript处理，纯CSS的:focus只会在元素处于焦点状态时生效。
常见问题解答
为什么设置的:focus样式不生效
最常见的原因是CSS选择器优先级不够，比如其他样式规则覆盖了:focus的样式。可以通过提高选择器优先级解决，比如给输入框添加专属类名，或者使用更具体的选择器。另外要检查是否漏写了冒号，:focus的冒号是伪类语法的必要部分，不能省略。
如何让整个表单项的容器在输入框聚焦时变化
可以利用CSS的相邻兄弟选择器或者:focus-within伪类实现，比如让输入框的父容器在输入框聚焦时改变边框：
/* 表单项容器默认样式 */
.form-item {
margin-bottom: 20px;
padding: 10px;
border: 1px solid transparent;
border-radius: 6px;
transition: border-color 0.3s ease;
}
/* 当容器内有元素获得焦点时，改变容器边框 */
.form-item:focus-within {
border-color: #1677ff;
}
上面的代码中，:focus-within伪类会匹配内部有任何可获得焦点元素处于焦点状态的容器，不需要精确选择输入框，使用起来更灵活。