html 复选框 特效 大,纯CSS+HTML自定义checkbox效果

好的，这个问题我可以帮你回答。下面是一个简单的纯CSS+HTML自定义checkbox效果代码，可以实现复选框的特效：

<label class="checkbox">
  <input type="checkbox">
  <span class="checkmark"></span>
</label>

.checkbox {
  position: relative;
  display: inline-block;
  cursor: pointer;
  padding-left: 25px;
  margin-right: 15px;
  font-size: 16px;
  line-height: 20px;
}

.checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  border: 1px solid #ccc;
  border-radius: 3px;
}

.checkbox:hover input ~ .checkmark {
  background-color: #f2f2f2;
}

.checkbox input:checked ~ .checkmark {
  background-color: #2196F3;
}

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.checkbox input:checked ~ .checkmark:after {
  display: block;
}

.checkbox .checkmark:after {
  left: 7px;
  top: 3px;
  width: 6px;
  height: 11px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

这个代码会生成一个带有特效的复选框，当鼠标悬停在复选框上时会有灰色背景，选中时会有蓝色背景，并且复选框内会有一个白色的勾。

希望这个代码对你有所帮助！