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

单选/复选框是 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 欢迎吐槽。

参考资料

posted @ 2016-08-25 20:55  by.Genesis  阅读(1951)  评论(2编辑  收藏  举报