css复选框美化成下拉 |css 容器类似删除线效果

/* HTML代码 */
<label for="checkbox" class="drop-down">下拉菜单</label>
<input type="checkbox" id="checkbox" class="toggle"/>
<ul class="dropdown-menu">
<li><input type="checkbox" name="option-1" value="Option 1"> <label for="option-1">Option 1</label></li>
<li><input type="checkbox" name="option-2" value="Option 2"> <label for="option-2">Option 2</label></li>
<li><input type="checkbox" name="option-3" value="Option 3"> <label for="option-3">Option 3</label></li>
</ul>
/* CSS代码 */
/* 隐藏实际的checkbox */
.toggle {
display: none;
}
/* 为label添加样式 */
.drop-down {
display: block;
padding: 10px;
font-size: 16px;
font-weight: bold;
background-color: #EEE;
cursor: pointer;
}
/* 为ul添加样式 */
.dropdown-menu {
display: none;
list-style: none;
padding: 0;
margin: 0;
background-color: #FFF;
border: 1px solid #CCC;
position: absolute;
z-index: 999;
}
/* 根据checkbox状态显示/隐藏下拉菜单 */
.toggle:checked ~ .dropdown-menu {
display: block;
}
/* 为下拉菜单项添加样式 */
.dropdown-menu li {
padding: 10px;
}
/* 为选中的复选框添加样式 */
.dropdown-menu input:checked + label {
font-weight: bold;
}

上述代码中，大家首先隐藏了实际的checkbox，然后为label添加样式，使其表现为下拉菜单的标题。接着，大家为ul添加样式，并使用CSS的层叠特性，在checkbox选中时显示下拉菜单。最后，大家为下拉菜单项和选中的复选框添加样式，使它们看起来更加美观和直观。

通过上述代码，大家可以轻松地将普通的复选框转化为下拉菜单，为用户带来更加便捷和美观的使用体验。