css中的focus选择器是伪类选择器的一种，用于选中当前处于焦点状态的元素，当元素被用户通过鼠标点击、键盘Tab键切换等方式激活时，对应的focus样式就会生效，是提升页面交互体验的重要工具。
focus选择器的核心作用
focus选择器的核心作用是给获得焦点的元素添加专属样式，让用户清晰感知当前正在操作的元素位置，避免操作失误。它主要服务于可交互元素，比如表单输入框、按钮、链接等，当这些元素被激活时，样式变化能给用户明确的反馈。
适用元素范围
并不是所有html元素都能触发focus状态，只有满足以下条件的元素才能使用focus选择器设置样式：
- 本身是天然可聚焦的元素，比如<input>、<textarea>、<select>、<button>、<a>标签
- 设置了
tabindex属性的普通元素，比如<div>、<span>等，只要添加了tabindex属性就可以被聚焦
常见使用场景
1. 表单输入框焦点样式
这是focus选择器最常见的使用场景，当用户点击输入框准备输入内容时，给输入框添加边框高亮、阴影等样式，提示用户当前正在操作该输入框。
/* 输入框默认样式 */
input[type="text"] {
width: 200px;
height: 30px;
border: 1px solid #ccc;
border-radius: 4px;
padding: 0 10px;
outline: none; /* 去除浏览器默认的聚焦轮廓 */
}
/* 输入框获得焦点时的样式 */
input[type="text"]:focus {
border-color: #409eff;
box-shadow: 0 0 5px rgba(64, 158, 255, 0.5);
}
2. 按钮焦点样式
按钮在获得焦点时也可以设置样式，比如改变背景色、添加边框，让用户知道当前可以通过回车键触发该按钮的点击事件。
/* 按钮默认样式 */
.btn {
padding: 8px 16px;
background-color: #f0f0f0;
border: 1px solid #ddd;
border-radius: 4px;
cursor: pointer;
}
/* 按钮获得焦点时的样式 */
.btn:focus {
background-color: #e6e6e6;
border-color: #409eff;
}
3. 自定义可聚焦元素样式
给普通元素添加tabindex属性后，也可以使用focus选择器设置样式，比如自定义的下拉菜单触发区域。
<div class="custom-focus" tabindex="0">点击或按Tab键聚焦我</div>
.custom-focus {
width: 200px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
cursor: pointer;
}
.custom-focus:focus {
border-color: #ff6700;
background-color: #fff8f0;
}
使用注意事项
- 不要忘记去除浏览器默认的
outline样式后再自定义focus样式，否则可能会出现样式冲突，不过要注意不能为了美观直接全局去除outline，会影响键盘导航用户的体验 - focus选择器的样式优先级高于元素默认样式，但是低于内联样式和
!important标记的样式 - 如果元素设置了
display: none或者visibility: hidden，即使添加了tabindex也无法获得焦点，focus样式不会生效 - 移动端触摸操作时，部分浏览器可能不会触发focus状态，需要结合
touch相关事件做兼容处理
与focus-within的区别
很多开发者会混淆focus和focus-within，两者的核心区别是：focus只匹配自身获得焦点的元素，而focus-within会匹配自身或者后代元素获得焦点的元素。比如一个表单容器，当里面的输入框获得焦点时，focus-within可以给整个表单容器添加样式，而focus不行。
/* 当表单内任意输入框获得焦点时，整个表单容器添加边框 */
form:focus-within {
border: 1px solid #409eff;
padding: 10px;
border-radius: 4px;
}
cssfocus_selector伪类选择器表单交互修改时间：2026-07-20 20:03:27