:checked伪类用于选中状态的复选框或单选按钮，可改变其样式或联动其他元素；通过accent-color可修改默认颜色，结合label与隐藏input能自定义外观，利用兄弟选择器可实现无JS的折叠菜单等交互效果。
当处理复选框的样式时，:checked 伪类选择器非常有用。它能选中处于“选中”状态的单选按钮或复选框，让你可以基于用户交互动态改变样式。
基本用法
:checked 可用于 input[type=”checkbox”] 或 input[type=”radio”] 元素，匹配当前被选中的控件。
例如：
input[type="checkbox"]:checked { accent-color: #4caf50;}
这段代码会将选中的复选框颜色设为绿色。现代浏览器默认支持 accent-color 属性来简单修改复选框颜色。
立即学习“前端免费学习笔记（深入）”；
自定义复选框样式
如果想完全替换原生复选框外观，通常结合 label 和隐藏的 input 使用。
Revid AI
AI短视频生成平台
96 查看详情 
隐藏原始复选框（使用 opacity: 0 或 display: none） 用 label 模拟视觉样式 通过 :checked 控制 label 的显示效果
示例代码：
.custom-checkbox { display: none;}.checkbox-label { position: relative; padding-left: 30px; cursor: pointer;}.checkbox-label::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; border: 2px solid #999; background-color: white;}.checkbox-label::after { content: '✔'; position: absolute; left: 4px; top: 50%; transform: translateY(-50%); font-size: 12px; color: white; opacity: 0;}.custom-checkbox:checked + .checkbox-label::after { opacity: 1;}.custom-checkbox:checked + .checkbox-label::before { background-color: #4caf50; border-color: #4caf50;}
配合其他元素联动
:checked 不仅能改变自身样式，还能控制其他元素的显示，比如制作无 JS 的折叠菜单或开关组件。
利用兄弟选择器（+ 或 ~），可以实现选中后展开内容：
.panel { display: none;}.toggle:checked ~ .panel { display: block;}
基本上就这些。使用 :checked 配合 label 和 CSS 生成内容，能做出美观且可访问的复选框样式，无需 JavaScript。关键是结构清晰，确保可点击区域足够大，提升用户体验。
以上就是css伪类选择器:checked在复选框样式应用的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1042949.html
微信扫一扫 
支付宝扫一扫 
