纯 CSS 无法直接响应单次点击事件并保持状态，但可通过隐藏复选框（checkbox）+ :checked 伪类 + 标签关联技巧，实现“点击即切换、状态持久保留”的交互效果，无需 JavaScript。
纯 css 无法直接响应单次点击事件并保持状态，但可通过隐藏复选框（checkbox）+ `:checked` 伪类 + 标签关联技巧，实现“点击即切换、状态持久保留”的交互效果，无需 javascript。
在 Web 开发中，常需实现类似“点击图片后永久应用滤镜（如灰度），再次点击恢复原状”的交互。遗憾的是，CSS 的 :active 仅在鼠标按下瞬间生效，:visited 仅对超链接历史有效且受安全限制，二者均无法满足“单击切换并持久保留”的需求。
所幸，我们可以借助 HTML 表单控件的天然状态机制——复选框（<input type="checkbox">）——结合 CSS 的 :checked 伪类与相邻/后代选择器，构建纯 CSS 的开关式交互：
✅ 实现原理
- 将 <input type="checkbox"> 隐藏（display: none）；
- 使用 <label> 包裹目标元素（如 <img>），并通过 for 属性绑定 checkbox 的 id，使点击 label 即触发 checkbox 状态切换；
- 利用 :checked 选择器配合兄弟/后代关系，精准控制目标元素的样式（如 filter）；
- 添加 transition 实现平滑动画效果。
? 完整示例代码
<div class="toggle-filter">
<input id="toggle-img" class="hidden-checkbox" type="checkbox">
<label for="toggle-img">
<img src="https://picsum.photos/id/237/200/200" alt="Sample image">
</label>
</div>.hidden-checkbox {
display: none;
}
.toggle-filter label > img {
transition: filter 0.3s ease;
cursor: pointer;
border-radius: 4px;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.toggle-filter input[type="checkbox"]:checked ~ label > img {
filter: grayscale(100%);
}? 注意事项：
- 必须确保 HTML 结构中 <input> 在 <label> 之前，才能使用 ~（通用兄弟选择器）正确匹配；
- 若需支持键盘访问（无障碍），建议为 <label> 添加 tabindex="0" 并处理 Enter/Space 键（此时需 JS 辅助，已超出纯 CSS 范畴）；
- 此方案本质是“状态切换”，适用于 toggle 类交互（开/关、显示/隐藏、高亮/取消），不适用于需记录多次点击或复杂逻辑的场景；
- 所有样式变更均受 CSS 作用域限制，无法修改 DOM 属性或触发事件，如需日志、统计或联动其他组件，仍需 JavaScript。
该技巧轻量、兼容性好（支持所有现代浏览器及 IE9+），是纯 CSS 实现用户交互状态管理的经典模式。掌握它，你便拥有了在无脚本环境下构建可访问、可动画、可复用 UI 开关的能力。
立即学习“前端免费学习笔记（深入）”；
