跳转到主内容
websoft网络软件专家 - 深耕网络技术，打造实用软件！
📁 网站地图

css:focus伪类与:active伪类区别_为表单元素实现不同交互状态

陆砚码
陆砚码
• 👁 0人浏览过
:focus 在元素获得焦点时生效，与鼠标动作无关；:active 在鼠标/触控按下瞬间触发且瞬态存在；二者触发条件正交、生命周期不同，常共存于表单交互。 :focus 只在获得焦点时触发，不依赖鼠标动作 用户用 Tab 键切换、点击输入框、或调用
element.focus()
时，
:focus
就会生效。它和鼠标是否按下完全无关——哪怕鼠标悬停但没点，只要元素有焦点，样式就显示。常见于表单校验提示、键盘导航高亮等场景。 注意：
:focus
在移动端可能行为受限（比如 iOS Safari 默认不给非可交互元素加 focus 样式），需配合
tabindex="0"
或确保元素原生可聚焦（如
、
）。
input:focus
通常用于加边框阴影或背景微调，提示“当前正在编辑” 若同时定义了
:hover
和
:focus
，鼠标悬停后点击会先触发
:hover
，再叠加
:focus
；松开鼠标后
:hover
消失，
:focus
仍保留 避免仅靠颜色变化实现
:focus
样式，需满足 WCAG 对比度和视觉辨识要求 :active 在鼠标/触控按下瞬间触发，松开即消失
:active
是瞬态伪类：从鼠标左键按下去那一刻开始，到松开为止，样式才生效。它不关心焦点，也不等待元素是否可交互——哪怕一个
加了
:active
，点击它也会触发（尽管没实际交互逻辑）。 典型用途是按钮按下的视觉反馈，比如缩放、变色、位移。但它无法用于键盘操作（Tab 进入不会触发
:active
）。 Comet AI 浏览器 下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。 下载 立即学习 “ 前端免费学习笔记（深入） ”；
button:active
常配合
transform: scale(0.98)
或
background-color
暗化，模拟“被按下”感 在触摸设备上，
:active
持续时间极短（约 100–300ms），且默认可能被禁用，需在
中加
并确保无
-webkit-tap-highlight-color: transparent
干扰 不要用
:active
替代
:focus
来做可访问性焦点指示——它不持久，屏幕阅读器用户无法感知 表单中两者常共存，但 作用域 和生命周期完全不同 比如一个搜索框：
input[type="search"]
获得焦点时显示蓝色描边（
:focus
），而用户点击右侧清空按钮时，按钮短暂下陷（
:active
）。它们互不干扰，因为触发条件正交：一个是“谁在编辑”，一个是“谁正被按着”。 顺序很重要：CSS 中
:active
应写在
:focus
后面，否则聚焦状态下点击可能看不到按下效果（层叠优先级相同，后声明者胜出）
:focus-visible
是更现代的替代方案，能区分键盘 focus 和鼠标 click，避免鼠标用户看到多余焦点环；但兼容性需查 Can I Use 某些框架（如 React）中，手动调用
ref.current.focus()
不会触发
:active
，因为没真实鼠标事件，这点容易误以为样式失效 别混淆 :active 和 JavaScript 的 mousedown / click 事件 CSS
:active
是纯样式响应，不产生事件、不阻塞主线程、也不可编程控制持续时间。而 JS 的
mousedown
可以做防抖、取消默认行为、甚至阻止
:active
触发（比如
e.preventDefault()
在某些 浏览器 下会影响）。 如果需要“长按触发”或“按住持续执行”，必须用 JS，
:active
无法做到 在
contenteditable
元素或自定义组件上，
:focus
行为可能不稳定，建议用
document.activeElement
+ 类名切换来兜底 测试时别只靠鼠标点——用 Tab 切换验证
:focus
，用真机触摸验证
:active
是否及时响应 真正难的是让两者在不同输入方式下都自然：键盘用户不想要突兀的 :active，触摸用户又讨厌延迟的 :focus 反馈。细节都在事件流和平台默认行为里，而不是一行 CSS 能解决的。

相关文章