纯样式无脚本无图片自定义单/复选框

单选/复选框是 Web 应用常用控件，随处可见，原生的单/复选框控件的外观一般都不怎么美观，有些时候，原生的控件模样并不能满足设计要求，这时需要更为精致的控件样式，我们更希望其样式可以允许自定义。

CSS3 新增了一个伪类选择器 :checked，用于选择被勾选的单/复选框，利用该选择器可以分别为未选中和选中状态的单/复选框应用不同的样式，怎么给它应用样式呢？直接修改单/复选框的样式比较困难，不过可以使用一些其它方法来实现。

单选/复选框作为一个表单控件，可以使用一个 <label> 元素与之关联，将 <label> 元素的 for 属性指向复选框的 id 属性，这里使用一个复选框来举例说明：

<input id="example-checkbox" type="checkbox">
<label for="example-checkbox">Check</label>

此时，每次点击这个 <label> 元素会发现复选框的选择状态也会变化，测试表明，点击关联某个单/复选框的 <label> 时，产生的效果和点击单/复选框自身相同。然后，因为 <label> 元素紧邻在单/复选框之后，通过组合使用相邻元素选择器（Adjacent sibling selector），我们可以把相应的样式应用到 <label> 元素上去，相比较而言，给 <label> 元素应用样式要比给原生的单/复选框应用样式简单多了。

相邻元素选择器，在两个选择器中间添加一个加号，像这样 selector1 + selector2，表示选择 selector1 元素之后紧邻的 selector2 元素：

input[type="checkbox"] + label {
  /* 未选中状态 */
}

input[type="checkbox"]:checked + label {
  /* 选中状态 */
}

为了不对 <label> 元素自身的样式造成影响，这里使用生成内容伪元素(::before/::after)来应用单/复选框的自定义样式，首先使用 ::before 伪元素来生成复选框的外框样式：

input[type="checkbox"] + label::before {
  background-color: #fff;
  border: 1px solid #50a7f8;
  border-radius: 3px;
  content: "\00a0";
  height: 13px;
  left: 0;
  position: absolute;
  width: 13px;
}

然后使用 ::after 伪元素来生成复选框中间的勾的样式，用一个矩形只应用左边框和下边框，然后逆时针旋转 45 度即可做成一个简单的勾形：

input[type="checkbox"] + label::after {
  background: transparent;
  border: 0 solid #50a7f8;
  border-width: 0 0 3px 3px;
  content: "\00a0";
  height: 3px;
  left: 3px;
  position: absolute;
  top: 3px;
  transform: scale(0) rotate(-45deg);
  transition: transform 0.2s linear;
  width: 6px;
}

为了在没有勾选的时候不显示这个勾，这里用 transform: scale(0) 来隐藏了这个勾，当复选框被勾选的时候才显示出来：

input[type="checkbox"]:checked + label::after {
  transform: scale(1) rotate(-45deg);
}

这里使用了绝对定位，所以给 <label> 元素增加一个相对定位，并在左边预留一定的空间：

input[type="checkbox"] + label {
  min-height: 20px;
  padding-left: 20px;
  position: relative;
}

原生的控件可以把它隐藏掉了：

input[type="checkbox"] {
  display: none;
}

不过这样隐藏后就不能通过 Tab 键来与控件交互了，所以可以用另外的方法来隐藏控件，比如设置不透明度为 0：

input[type="checkbox"] {
  opacity: 0;
  position: absolute;
}

进一步，可以定义控件获取焦点时以及控件禁用时的样式：

input[type="checkbox"]:focus + label::before {
  outline: 1px dotted #aaa;
}

input[type="checkbox"]:disabled + label::before {
  background-color: #eee;
  border-color: #aaa;
}

input[type="checkbox"]:disabled + label::after {
  border-color: #aaa;
}

更进一步，给勾选添加过渡效果：

input[type="checkbox"] + label::after {
  transition: transform 0.2s linear;
}

单选框

和复选框一样，只是把自定义样式中的外框换成圆形外框，内部的勾换成一个实心圆：

<input id="example-radio" type="radio">
<label for="example-radio">Check</label>

HTML 结构是一样，样式也是类似：

input[type="radio"] {
  opacity: 0;
  position: absolute;
}

input[type="radio"] + label {
  min-height: 20px;
  padding-left: 20px;
  position: relative;
}

input[type="radio"] + label::before {
  background-color: #fff;
  border: 1px solid #50a7f8;
  border-radius: 50%;
  content: "\00a0";
  height: 13px;
  left: 0;
  position: absolute;
  top: 0;
  width: 13px;
}

input[type="radio"] + label::after {
  background: #50a7f8;
  border-radius: 50%;
  content: "\00a0";
  height: 9px;
  left: 3px;
  position: absolute;
  top: 3px;
  transform: scale(0);
  transition: transform .2s linear;
  width: 9px;
}

input[type="radio"]:checked + label::after {
  transform: scale(1);
}

input[type="radio"]:focus + label::before {
  outline: 1px dotted #aaa;
}

input[type="radio"]:disabled + label::before {
  background-color: #eee;
  border-color: #aaa;
}

input[type="radio"]:disabled + label::after {
  background-color: #aaa;
}

这篇文章里用到了很多种类的选择器，详情可以参考Selectors Level 3

我将这篇文章里涉及到的内容整合成了一个插件，Radio 欢迎吐槽。

参考资料

• caniuse