css如何判断复选框是否选中_使用checked伪类控制样式-css教程-PHP中文网

css如何判断复选框是否选中_使用checked伪类控制样式

P粉602998670

发布： 2025-12-23 19:41:02

原创

184人浏览过

:checked伪类可纯CSS判断复选框选中状态并样式控制，支持accent-color、兄弟选择器联动及label交互，现代浏览器兼容良好，JS动态设置也会实时更新样式。

css如何判断复选框是否选中_使用checked伪类控制样式

直接用 :checked 伪类就能判断复选框是否被选中，并据此设置样式，无需 JavaScript。

基础用法：给已选中的复选框加样式

:checked 只作用于 <input type="checkbox">（以及单选框、<option></option>）处于选中状态时。它本身选择的是输入元素，所以样式写在它上面即可：

input[type="checkbox"]:checked {
  accent-color: #4285f4;
}

登录后复制

现代浏览器支持 accent-color 快速修改复选框高亮色；老版本可配合自定义外观（如隐藏原生框 + 用 ::after 绘制图标）。

控制关联元素：用兄弟选择器影响其他内容

常见需求是“选中后显示说明文字”或“高亮对应标签”。利用 ~（通用兄弟）或 +（相邻兄弟）即可：

立即学习“前端免费学习笔记（深入）”；

选中后显示隐藏的提示文字（同级后续元素）：
input[type="checkbox"]:checked ~ .tip { display: block; }
让紧挨着的 label 变色：
input[type="checkbox"]:checked + label { color: #1a73e8; font-weight: bold; }

注意：HTML 中 input 必须在目标元素之前，且在同一父容器内，选择器才生效。

论小文

可靠的论文写作助手，包含11种学术写作类型，万字论文一键生成，可降重降AIGC，参考文献真实可标注，图表代码均可自定义添加。

435

查看详情

结合 label 实现无 JS 的交互效果

把 label 包裹复选框，或用 for 属性绑定，点击 label 就能触发选中。再配合 :checked，可实现开关、折叠面板等效果：

<input type="checkbox" id="toggle">
<label for="toggle">点击展开</label>
<div class="panel">这里是隐藏内容</div>

#toggle:checked ~ .panel { max-height: 200px; opacity: 1; }
.panel { max-height: 0; opacity: 0; overflow: hidden; transition: all 0.3s ease; }

登录后复制

这样就实现了纯 CSS 的显隐切换，适合轻量交互场景。