本文详解如何仅用 HTML + CSS 实现点击标签展开/收起带复选框的下拉菜单，核心在于正确使用 与 for/id 关联的 ，并通过相邻兄弟选择器 :checked + .toggle-content 控制显隐。
本文详解如何仅用 html + css 实现点击标签展开/收起带复选框的下拉菜单，核心在于正确使用 `` 与 `for/id` 关联的 `
要实现纯 CSS 驱动的多选下拉菜单（即点击标题展开含复选框的选项列表），关键在于语义正确性与CSS 选择器有效性。原代码中使用 <div class="hidden-checkbox"></div> 模拟复选框是失败的根本原因：CSS 的 :checked 伪类仅适用于 <input type="checkbox"> 或 <input type="radio"> 元素，对 <div> 完全无效。<p>✅ 正确做法是：</p>
<ul>
<li>使用真实的 <code><input type="checkbox" id="toggleVendors"> 作为状态控制器；
<label for="toggleVendors"></label> 与其 id 精确匹配，确保点击文本即可切换复选框状态；.hidden-checkbox:checked + .toggle-content 触发显示逻辑——该选择器要求 .toggle-content 紧接在 :checked 复选框之后（同级、且无其他元素隔开）。以下是完整可运行示例：
<div class="dropdown-checkbox">
<label for="toggleVendors" class="label-toggle form-control">
▼ 选择供应商
</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">阿里云</label></li>
<li><input type="checkbox" id="vendor-2"><label for="vendor-2">腾讯云</label></li>
<li><input type="checkbox" id="vendor-3"><label for="vendor-3">AWS</label></li>
<li><input type="checkbox" id="vendor-4"><label for="vendor-4">Azure</label></li>
</ul>
</div>
</div>对应 CSS（已优化）：
JavaStoryDevelop
下载
你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。 它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在
立即学习“Java免费学习笔记（深入）”；
.hidden-checkbox {
display: none; /* 彻底隐藏复选框，但保留其表单语义和 :checked 状态 */
}
.toggle-content {
display: none;
z-index: 2;
position: absolute;
background-color: #333;
color: white;
border: 1px solid #555;
border-radius: 4px;
padding: 6px 8px;
margin-top: 4px;
box-shadow: 0 2px 6px rgba(0,0,0,0.2);
min-width: 180px;
}
.hidden-checkbox:checked + .toggle-content {
display: block; /* ✅ 仅当复选框被勾选时生效 */
}
.label-toggle {
cursor: pointer;
padding: 8px 12px;
border: 1px solid #ccc;
border-radius: 4px;
background: #f9f9f9;
user-select: none;
display: inline-block;
font-size: 14px;
}
/* 下拉列表样式增强 */
ul {
list-style: none;
padding: 0;
margin: 0;
max-height: 160px;
overflow-y: auto;
}
li {
padding: 4px 0;
font-size: 13px;
}
li input[type="checkbox"] {
margin-right: 6px;
vertical-align: middle;
}
li label {
cursor: pointer;
user-select: none;
vertical-align: middle;
}
li:hover {
background-color: #e0e0e0;
border-radius: 3px;
}⚠️ 注意事项：
-
结构必须严格：
<input>必须直接位于<label></label>后、.toggle-content前，三者为同级元素；若插入其他标签（如<span></span>或换行符产生的空白文本节点），+选择器将失效； -
for和id必须完全一致（区分大小写），否则点击 label 不会触发 checkbox； - 若需支持键盘操作（如空格键切换），请确保
<input>在 DOM 中可聚焦（默认即满足）； - 如需“点击区域更大”，可将
label设为display: block并设置内边距，无需额外包裹容器。
✅ 总结：纯 CSS 多选下拉的本质是「状态驱动样式」——以原生 checkbox 为状态锚点，通过语义化 HTML 结构 + 精准 CSS 选择器完成交互闭环。无需脚本，轻量、可访问、易维护。
