:checked 伪类选择器用于匹配选中的 radio 或 checkbox，可结合 label 和兄弟选择器实现自定义样式、主题切换等无 JS 交互效果，关键在于正确关联元素以确保可访问性。
:checked 是 CSS 中的一个伪类选择器，用于匹配处于“选中”状态的单选按钮（radio）或复选框（checkbox）输入元素。它在无需 JavaScript 的情况下实现交互式 UI 效果非常有用，比如显示隐藏内容、切换样式或创建自定义控件。
基本语法与使用场景
:checked 选择器可以配合 input 元素的 type=”radio” 或 type=”checkbox” 使用。当用户选中某个选项时，对应的样式规则就会生效。
常见用法包括：
自定义单选/复选样式 控制其他元素的显示与隐藏 制作无 JS 的开关、菜单或模态框
在复选框中的应用
当 checkbox 被勾选时，:checked 可以触发样式变化。例如，可以隐藏默认的复选框，并用自定义图标或背景表示选中状态。
立即学习“前端免费学习笔记（深入）”；
Pic Copilot
AI时代的顶级电商设计师，轻松打造爆款产品图片
158 查看详情 
示例：自定义复选框外观
#agree { display: none;}#agree + label { background: white; border: 2px solid #ccc; width: 16px; height: 16px; display: inline-block; position: relative; margin-right: 8px; cursor: pointer;}#agree:checked + label::after { content: “✓”; color: green; position: absolute; top: -2px; left: 2px;}
这里通过隐藏原生 checkbox，利用 label 和伪元素 ::after 来绘制一个绿色对勾，仅在 :checked 时显示。
在单选按钮中的应用
对于 radio 按钮，:checked 常用于突出当前选中项，或者联动控制其他区域的样式。
示例：根据选择切换主题颜色
这是一个面板
#light:checked ~ .panel { background: white; color: black; border: 1px solid #ddd;}#dark:checked ~ .panel { background: #333; color: white; border: none;}.panel { padding: 16px; margin-top: 10px; transition: all 0.3s;}
利用兄弟选择器（~），可以基于哪个 radio 被选中来动态改变 .panel 的样式，实现简单的主题切换效果。
基本上就这些。:checked 结合 label、相邻兄弟选择器（+）和普通兄弟选择器（~），能实现丰富的视觉反馈和交互逻辑，是构建现代表单体验的重要工具。关键在于结构合理，确保可访问性和语义正确。不复杂但容易忽略细节，比如必须保证 input 和 label 关联正确才能点击 label 触发选中。
以上就是css :checked在复选框与单选按钮中应用的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1050072.html
微信扫一扫 
支付宝扫一扫 
