自定义“redio”与“checkbox”的样式

shut up,and show code.

1. html

<input type="checkbox" name="agreement" id="agreement" />
<label for="agreement">《服务条款》</label>

2. css

input[type="checkbox"] + label::before {
  content: "\a0"; /*不换行空格*/
  display: inline-block;
  vertical-align: middle;
  font-size: 14px;
  width: .9em;
  height: .85em;
  margin-right: .4em;
  border-radius: 50%;
  border: 1px solid #fc7c4d;
  text-indent: .15em
}
input[type="checkbox"]:checked + label::before {
  background-image: url("checked.png");
  background-size: 100% 100%;
  border:none;
  font-size:14px;
  width: 1.05em;
  height: 1em;
}
input[type="checkbox"] {
  position: absolute;
  clip: rect(0, 0, 0, 0);
}

思路：

1. checkbox 目标元素以及其checked状态设置伪元素,所有样式设置伪元素上。
2. 将本元素隐藏。