:checked伪类可实现无需JavaScript的交互效果。1. 控制元素显隐：利用+或~选择器，选中复选框时显示关联内容；2. 自定义复选框样式：隐藏原生控件，通过label和::after伪元素绘制美观对勾；3. 制作开关按钮：结合transition实现滑动动画，选中时背景变色、滑块右移；4. 多级菜单或选项卡：用radio配合~选择器，切换不同面板内容。关键在于HTML结构合理，input位于目标元素前以确保选择器生效。
:checked 是 CSS 中一个非常实用的伪类选择器，主要用于匹配处于“选中状态”的单选按钮（radio）或复选框（checkbox）。虽然它本身不能改变表单元素的逻辑行为，但结合 HTML 和 CSS 可以实现丰富的视觉交互效果。以下是几个常见的使用技巧和实用场景。
利用 :checked 配合相邻兄弟选择器（+）或通用兄弟选择器（~），可以控制页面中其他元素的显示或隐藏，无需 JavaScript。
例如：点击复选框展开/收起内容区域。
<input type="checkbox" id="toggle"> <label for="toggle">点击展开内容</label> <div class="content">这里是被隐藏的内容</div>
#toggle + .content {
display: none;
}
#toggle:checked + .content {
display: block;
}
这样，当复选框被选中时，后面的 .content 就会显示出来。
立即学习“前端免费学习笔记（深入）”；
默认的复选框样式在不同浏览器中表现不一致。:checked 可以配合隐藏原生控件，用 CSS 绘制更美观的自定义样式。
<input type="checkbox" id="custom-checkbox"> <label for="custom-checkbox" class="custom-checkbox"></label>
#custom-checkbox {
display: none;
}
.custom-checkbox {
width: 18px;
height: 18px;
border: 2px solid #ccc;
display: inline-block;
position: relative;
cursor: pointer;
}
#custom-checkbox:checked + .custom-checkbox::after {
content: "✔";
color: #4CAF50;
font-size: 14px;
position: absolute;
top: -2px;
left: 2px;
}
通过隐藏原始 input，使用 label 模拟点击，并用 ::after 添加对勾符号，实现跨浏览器一致的视觉效果。
将复选框变成现代风格的滑动开关，提升界面体验。
<input type="checkbox" id="switch"> <label for="switch" class="switch"></label>
.switch {
width: 50px;
height: 24px;
background: #ddd;
border-radius: 12px;
position: relative;
display: inline-block;
transition: background 0.3s;
}
.switch::after {
content: "";
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
background: white;
top: 2px;
left: 2px;
transition: left 0.3s;
}
#switch:checked + .switch {
background: #4CAF50;
}
#switch:checked + .switch::after {
left: 28px;
}
选中时背景变绿，小圆球滑动到右侧，形成典型的开关样式。
使用多个 radio 或 checkbox，结合 :checked 和 ~ 选择器，可实现无 JS 的选项卡或折叠菜单。
例如：用 radio 模拟单选选项卡：
<input type="radio" name="tab" id="tab1" checked> <label for="tab1">首页</label> <input type="radio" name="tab" id="tab2"> <label for="tab2">设置</label> <div class="panel" id="home">首页内容</div> <div class="panel" id="settings">设置内容</div>
.panel { display: none; }
#tab1:checked ~ #home,
#tab2:checked ~ #settings {
display: block;
}
通过 ~ 选择器选中对应面板，实现简单的标签页切换。
基本上就这些。合理使用 :checked 能减少对 JavaScript 的依赖，提升页面响应速度，同时让交互更直观。关键是结构要清晰，input 必须在相关元素之前或附近，确保选择器能正确匹配。不复杂但容易忽略细节。
以上就是在css中:checked复选框伪类使用技巧的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
551
收藏
