本文介绍如何仅用 CSS 实现点击标签切换显示/隐藏含复选框的下拉内容区域，关键在于正确使用 与 的语义化关联，以及相邻兄弟选择器 :checked + .toggle-content 的精准应用。
本文介绍如何仅用 css 实现点击标签切换显示/隐藏含复选框的下拉内容区域，关键在于正确使用 `` 与 `
要实现纯 CSS 控制的多选下拉菜单（即点击标签展开/收起含复选框的列表），核心前提在于：必须使用真实的 此外，HTML 结构必须满足 CSS 相邻兄弟选择器（ 以下是完整、可运行的实现方案： 对应 CSS（已优化可访问性与视觉表现）： 你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。 它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在 ⚠️ 关键注意事项： 通过语义化 HTML 与精准 CSS 选择器的配合，即可构建轻量、可靠、无障碍的多选下拉交互，是纯前端交互设计的经典实践之一。<input type="checkbox"> 元素，而非 <div> 模拟。CSS 的 <code>:checked 伪类仅对原生表单控件（如 input[type="checkbox"] 或 input[type="radio"]）生效，对自定义 div 无效——这正是原始代码失效的根本原因。+）的定位要求：.hidden-checkbox:checked + .toggle-content 表示“被选中的 checkbox 紧邻其后的 .toggle-content 元素”。因此，.toggle-content 必须直接位于 checkbox 元素之后，且二者为同级兄弟节点。<div class="dropdown-wrapper">
<label for="toggleVendors" class="label-toggle form-control">
▼ click here to toggle options
</label>
<input type="checkbox" id="toggleVendors" class="hidden-checkbox"><div class="toggle-content">
<ul>
<li>
<input type="checkbox" id="vendor-1"><label for="vendor-1">Vendor A</label>
</li>
<li>
<input type="checkbox" id="vendor-2"><label for="vendor-2">Vendor B</label>
</li>
<li>
<input type="checkbox" id="vendor-3"><label for="vendor-3">Vendor C</label>
</li>
</ul>
</div>
</div>
/* 隐藏原生 checkbox，保留其功能 */
.hidden-checkbox {
position: absolute;
opacity: 0;
pointer-events: none;
}
/* 下拉内容默认隐藏 */
.toggle-content {
display: none;
position: absolute;
top: 100%;
left: 0;
margin-top: 4px;
z-index: 1000;
background-color: #696969;
color: white;
border: 1px solid #000;
border-radius: 5px;
padding: 6px 8px;
width: 220px;
box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
/* 选中时显示下拉区 */
.hidden-checkbox:checked + .toggle-content {
display: block;
}
/* 增强 label 可点击体验 */
.label-toggle {
cursor: pointer;
user-select: none;
padding: 8px 12px;
background-color: #f8f9fa;
border: 1px solid #ced4da;
border-radius: 4px;
display: inline-block;
font-size: 14px;
}
/* 列表样式 */
.toggle-content ul {
list-style-type: none;
padding: 0;
margin: 0;
max-height: 180px;
overflow-y: auto;
}
.toggle-content li {
padding: 4px 0;
font-size: 13px;
}
.toggle-content li:hover {
background-color: #555;
border-radius: 3px;
margin: -2px;
}
/* 为复选框添加可见样式（可选） */
.toggle-content input[type="checkbox"] {
margin-right: 6px;
vertical-align: middle;
}
.toggle-content label {
cursor: pointer;
user-select: none;
vertical-align: middle;
}
for 属性值（如 "toggleVendors"）必须与对应 <input> 的 id 完全一致，才能实现点击 label 切换 checkbox；.toggle-content 必须紧跟在 <input> 后面，中间不可插入其他元素（包括空格或换行符，若需保留可改用 ~ 通用兄弟选择器，但会降低精确性）；<div class="hidden-checkbox"> 替代 <code><input>，CSS 无法监听其状态变化；<label for="..."></label> 文本标签，提升可访问性（屏幕阅读器支持）和点击热区；
