:checked 伪类选择器用于匹配选中的 radio 或 checkbox，可结合 label 和兄弟选择器实现自定义样式、主题切换等无 JS 交互效果，关键在于正确关联元素以确保可访问性。
:checked 是 CSS 中的一个伪类选择器，用于匹配处于“选中”状态的单选按钮（radio）或复选框（checkbox）输入元素。它在无需 JavaScript 的情况下实现交互式 UI 效果非常有用，比如显示隐藏内容、切换样式或创建自定义控件。
:checked 选择器可以配合 input 元素的 type="radio" 或 type="checkbox" 使用。当用户选中某个选项时，对应的样式规则就会生效。
常见用法包括：
当 checkbox 被勾选时，:checked 可以触发样式变化。例如，可以隐藏默认的复选框，并用自定义图标或背景表示选中状态。
立即学习“前端免费学习笔记（深入）”；
示例：自定义复选框外观<input type="checkbox" id="agree"> <label for="agree">我同意条款</label>
这里通过隐藏原生 checkbox，利用 label 和伪元素 ::after 来绘制一个绿色对勾，仅在 :checked 时显示。
对于 radio 按钮，:checked 常用于突出当前选中项，或者联动控制其他区域的样式。
示例：根据选择切换主题颜色<input type="radio" name="theme" id="light" checked> <label for="light">浅色</label> <input type="radio" name="theme" id="dark"> <label for="dark">深色</label> <div class="panel">这是一个面板</div>
利用兄弟选择器（~），可以基于哪个 radio 被选中来动态改变 .panel 的样式，实现简单的主题切换效果。
基本上就这些。:checked 结合 label、相邻兄弟选择器（+）和普通兄弟选择器（~），能实现丰富的视觉反馈和交互逻辑，是构建现代表单体验的重要工具。关键在于结构合理，确保可访问性和语义正确。不复杂但容易忽略细节，比如必须保证 input 和 label 关联正确才能点击 label 触发选中。
以上就是css :checked在复选框与单选按钮中应用的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
521
收藏
