CSS人人都能写自定义Checkbox（+1白话讲解）

背景

那一刻...无数前端开发者想起了本身曾经被Checkbox支配的恐惧...这种在绝大多数浏览器中几乎或彻底不能进行样式替代的玩意让开发者们被迫选择默认样式，或者是找一些访问性极差的hack方案...

开始操做

• 先把基本结构搞出来

<input type="checkbox" id="awesome" />
<label for="awesome">Awesome!</label>
复制代码

可能有部分人不知道label有啥用: 当label与checkbox关联后，就能够起到触发开关的做用，而且咱们能够经过对其添加一些内容(下面会讲解)来模拟checkbox的样式，再把真正的checkbox隐藏，最终达到咱们的目的

• 添加样式

input[type="checkbox"] + label::before{
  content: '\a0'; /* 不换行空格 */
  display: inline-block; /* 让元素和label处于同一行 */
  vertical-align: .1em; /* 设置元素向上偏移.1em */
  width: .8em;
  height: .8em;
  margin-right: .2em; /* 和label保持必定距离 */
  border-radius: .2em;  /* 加个圆角 */
  background-color: lightcoral;
  text-indent: .15em; /* 设置元素内content(下文模拟的✓)的缩进 */
  line-height: .65; /* 设置行高 */
}
复制代码

'+' 选择器指相邻同胞选择器，例子中指选择紧挨在checkbox后面的label~

对于content这个属性，这里有篇博客你们能够看一下编码

关于em这里就再也不讲解啦~ 不过仍是推荐你们出门拐拐拐去学习一下emmmmm.

• 展现

这个淡珊瑚色的框框就是咱们设置的label::before

• 加个选中状态

input[type="checkbox"]:checked + label::before{
  content: '\2713';
  background: lightblue;
}
复制代码

• 展现

  

这个对勾的位置受到了上面样式text-indent: .15em的影响

这里用到了CSS3的checked伪对象选择器

• 隐藏默认的checkbox

input[type="checkbox"]{
  position: absolute;
  clip: rect(0,0,0,0); /* 剪裁绝对定位元素 */
}
复制代码

• 展现

注意, 这里使用display:none虽然也能隐藏,可是会将checkbox从tab切换焦点的队列中删除(好比你输入完帐号密码后使用tab不会使checkbox得到焦点)

结果

• Html

<input type="checkbox" id="awesome" />
<label for="awesome">Awesome!</label>
复制代码

• Css

input[type="checkbox"] + label::before{
  content: '\a0';
  display: inline-block;
  vertical-align: .1em;
  width: .8em;
  height: .8em;
  margin-right: .2em;
  border-radius: .2em;
  background-color: lightcoral;
  text-indent: .15em;
  line-height: .65;
}
input[type="checkbox"]:checked + label::before{
  content: '\2713';
  background: lightblue;
}
input[type="checkbox"]{
  position: absolute;
  clip: rect(0,0,0,0);
}
复制代码

了解了基础操做后，相信各位能本身独立写一个自定义checkbox啦，各位也能够自由修改content或者添加动画作出酷炫的效果~