checkbox纯css

checkBox是HTML表单中常用的组件之一。通常，通过HTML和JavaScript来实现对checkBox的样式修改比较麻烦，需要一些基本的css处理才能达到自己期望的样式效果。但是，在CSS3中，自定义checkBox样式变得非常容易，而且非常灵活。

/*css*/
input[type=checkBox] {
  width: 25px;
  height: 25px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 5px;
  border: 2px solid #333;
  position: relative;
}

input[type=checkBox]:checked::before {
  content: "\2714";
  display: block;
  position: absolute;
  top: -3px;
  left: 5px;
  font-size: 1.5em;
  color: #336699;
}

上面的代码中，我们首先通过input[type=checkBox]选择器选中要添加样式的checkBox，接着设置其宽度和高度，并取消了原本的自带样式。

接着，我们通过伪元素:before来添加图标（unicode字符）以显示checkBox的选中状态。通过content属性，在checked状态下显示一个 ✓ 。然后我们对这个伪元素进行定位，使其处于checkBox的指定区域。最后，选择对图标进行一些基本样式设置，如字体大小和颜色。

/*HTML*/

  CheckBox Label Text

最后，我们通过一个标签来包裹我们的输入框和文本，使得我们可以通过点击文本区域来更改checkBox的状态。

这只是一种简单的方法来自定义checkBox样式。你可以通过自由控制元素大小、位置、背景色等，将其定制成任何你需要的样式效果。