仅用 CSS 即可让按钮在首次点击时获得焦点并变色，再次点击时自动失焦并恢复原状——通过双层可聚焦元素与 pointer-events/opacity 的状态交替控制实现。
css 实现按钮点击切换焦点状态的纯样式方案：仅用 css 即可让按钮在首次点击时获得焦点并变色，再次点击时自动失焦并恢复原状——通过双层可聚焦元素与 `pointer-events`/`opacity` 的状态交替控制实现。
在纯 CSS 场景下，原生 <button></button> 元素一旦获得焦点（例如通过鼠标点击），默认不会因再次点击而自动失焦——这是浏览器的默认行为，且无法被 :focus 伪类本身直接“翻转”。但借助巧妙的 DOM 结构与 CSS 层叠逻辑，我们完全可以在不依赖 JavaScript 的前提下，模拟出「点击聚焦 → 再次点击失焦」的视觉与交互效果。
核心思路是：在按钮内部嵌套两个均可获得焦点的子元素（如 <span></span>），并通过 tabindex="0" 使其可聚焦；再利用 pointer-events 控制点击响应权，用 opacity 控制视觉可见性，使二者在聚焦态下动态交换角色。
✅ 实现原理简析
-
tabindex="0"：赋予任意元素键盘/鼠标可聚焦能力； -
pointer-events: auto / none：决定该元素是否响应鼠标事件（包括触发 focus）； -
:focus伪类：仅对当前真正获得焦点的元素生效； - 利用
.layer1:focus和.layer2:focus的样式覆盖，让每次聚焦都统一表现为“激活态”（如蓝色背景），而视觉上仅显示一个图层。
? 完整可运行示例（适配 styled-components）
import styled from "styled-components";
const FocusToggleButton = styled.button`
position: relative;
width: 200px;
height: 100px;
border: none;
background: none;
cursor: pointer;
.layer1,
.layer2 {
position: absolute;
inset: 0;
}
.layer1 {
background-color: red;
opacity: 1;
pointer-events: none;
}
.layer2 {
background-color: blue;
opacity: 0;
pointer-events: auto;
}
.layer1:focus,
.layer2:focus {
opacity: 1;
pointer-events: none;
}
`;
export default function ButtonFocus() {
return (
<FocusToggleButton type="button">
<span className="layer1" tabIndex={0} />
<span className="layer2" tabIndex={0} />
</FocusToggleButton>
);
}⚠️ 注意事项
- 此方案不改变原生按钮的
:focus状态，而是通过子元素聚焦实现视觉切换，因此无障碍支持（a11y）需额外测试（推荐为外层<button></button>添加aria-pressed并配合useEffect增强语义——但这就超出纯 CSS 范畴）； -
pointer-events: none在旧版 IE 中不支持（IE11+ 完全兼容）； - 若需支持键盘导航（Tab 键切换），该结构天然兼容：两次 Tab 进入、两次 Shift+Tab 退出，焦点会在两个
<span></span>间轮转，但因样式同步，用户感知为单次切换； - 不建议在复杂表单中滥用此技巧；对于真实状态管理（如开关、选中态），仍应优先使用 React 状态 +
aria-pressed+onBlur/onClick组合。
✅ 总结
虽然 CSS 无法直接“清除已存在的焦点”，但通过双焦点层 + 行为隔离的设计模式，我们成功绕过限制，实现了声明式、无 JS、无障碍友好的焦点切换视觉效果。它不仅是技巧展示，更体现了 CSS 在现代 UI 构建中持续进化的表达力。
