css写带多选框的下拉框

在前端开发中，下拉框是一个非常常用的页面组件。当我们需要让用户选择多个选项时，我们可以添加多选框来实现这一需求。下面我们就来看看如何使用CSS写带多选框的下拉框。

/* HTML代码 */
<div class="dropdown">
  <span class="dropdown__title">请选择：</span>
  <ul class="dropdown__options">
    <li class="dropdown__option">
      <input type="checkBox" name="option-1" id="option-1">
      <label for="option-1">选项1</label>
    </li>
    <li class="dropdown__option">
      <input type="checkBox" name="option-2" id="option-2">
      <label for="option-2">选项2</label>
    </li>
    <li class="dropdown__option">
      <input type="checkBox" name="option-3" id="option-3">
      <label for="option-3">选项3</label>
    </li>
    <li class="dropdown__option">
      <input type="checkBox" name="option-4" id="option-4">
      <label for="option-4">选项4</label>
    </li>
  </ul>
</div>

/* CSS代码 */
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown__title {
  display: inline-block;
  padding: 10px;
  background-color: #ccc;
  cursor: pointer;
}

.dropdown__options {
  position: absolute;
  z-index: 1;
  display: none;
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #fff;
  border: 1px solid #000;
  overflow-y: auto;
  max-height: 200px;
}

.dropdown__option {
  padding: 5px;
}

.dropdown__option label {
  cursor: pointer;
  display: block;
}

.dropdown__option input[type="checkBox"] {
  display: none;
}

.dropdown__option input[type="checkBox"]:checked + label {
  background-color: #ccc;
}

.dropdown:hover .dropdown__options {
  display: block;
}

上面的代码中，我们让下拉框的选项列表使用绝对定位，并将其设置为了display:none，这样默认情况下它是不显示的。当用户鼠标移动到下拉框上时，我们使用:hover来显示选项列表。在选项列表中，我们使用了来添加多选框，当用户勾选时，我们使用:checked来修改勾选项的样式。

我们可以将上面的代码复制到一个HTML文件中，使用浏览器打开即可看到效果。当然，你也可以根据需求进行一些样式或结构上的修改。