css下拉选择框多选框

CSS下拉选择框是前端开发中非常常用的一个UI组件，我们通过它可以在网页上显示出一个下拉选框，用户可以通过它来选择一些选项。不过，默认的下拉选择框只支持单选，如果我们需要多选呢？这就需要用到CSS多选框了。

要使用CSS多选框，我们需要在HTML中使用<input>标签，并在type属性中指定为checkBox。例如：

<input type="checkBox" name="option1" value="1">Option 1
<input type="checkBox" name="option2" value="2">Option 2
<input type="checkBox" name="option3" value="3">Option 3

通过这样的方式，我们就可以在页面上显示出多个多选框。需要注意的是，每个多选框都需要有一个不同的name属性值，这样才能正确的获取用户选中的值。

由于多选框是由input标签实现的，我们同样可以通过CSS来样式化它。例如，我们可以添加一个类名为checkBox-group的<div>标签包裹住多选框，并为其添加样式，以此来改变多选框的样式：

.checkBox-group {
  display: inline-block;
  background-color: #eee;
  padding: 10px;
  border-radius: 5px;
}

.checkBox-group label {
  display: block;
  padding: 5px;
}

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

.checkBox-group input[type="checkBox"]+label:before {
  content: '';
  display: inline-block;
  width: 15px;
  height: 15px;
  background-color: white;
  border: 1px solid #ccc;
  border-radius: 3px;
  margin-right: 5px;
}

.checkBox-group input[type="checkBox"]:checked+label:before {
  content: '\2713';
  text-align: center;
  line-height: 15px;
  font-size: 12px;
  color: #fff;
  background-color: dodgerblue;
}

通过上面的样式，我们可以将多选框的样式定制成自己想要的样子，这里的样式只是一个示例。需要注意的是，input[type="checkBox"]+label和input[type="checkBox"]:checked+label两个CSS选择器用来为多选框的选中状态和非选中状态分别设置不同的样式。

至此，我们已经完成了CSS下拉选择框多选框的使用方法介绍，希望能对你有所帮助。