【前端随记】纯css自定义checkbox复选框样式

/* 隐藏原生的checkbox */
.custom-checkbox input[type="checkbox"] {
  display: none;
}
 
/* 创建一个自定义的复选框 */
.custom-checkbox label:before {
  content: "";
  display: inline-block;
  width: 17px;
  height: 17px;
  margin-right: 8px;
  border: 1px solid #000;
  /* 可以添加更多样式，比如圆角等 */
}
 
/* 当checkbox被选中时改变复选框的样式 */
.custom-checkbox input[type="checkbox"]:checked + label:after {
  content: "✔";
  display: inline-block;
  color: #fff;
  position: absolute;
  left: 2px;
  top: 2px;
  width: 13px;
  height: 13px;
  background-color: #000;
  /* 可以添加更多样式，比如加边框等 */
}

这个CSS样式定义了一个基本的自定义复选框，当复选框被选中时，会在其中显示一个勾选标记。这个例子展示了如何隐藏原生的checkbox，并通过label和伪元素(:before和:after)来创建自定义的样式。