巧用css模拟checkbox和radiobox-逐梦个人博客

一、背景

熟悉HTML的朋友都知道，对于原生的checkbox和radiobox，各个设备渲染是不一样的，就比如windows和mac的渲染风格就相差很多，windows的看起来很挫的样子，有木有？而在实际工作中，设计师经常会要求统一各端显示样式，对于原生的checkbox和radiobox没有太多支持的样式调整，最多改改高宽，就算勉强改了，兼容性也会出各种问题，出于各方面考虑，只能选择用一些特殊的方法来模拟radiobox和checkbox，那么如何模拟呢？在这之前我们先回顾一下css的选择器。

二、CSS选择器

1、元素选择器，这应该是CSS中最常见的选择器了，该选择器通常是指某种HTML元素的标签，一个HTML文档中有许多标签，例如p标签，h1标签等。若要使文档中的所有p标签都使用同一个CSS样式，就应选择使用标签选择器。

div {color:#f00; border:1px solid #00f;}
p {color:#000;}

2、类选择器，元素选择器可以为整个HTML文档中的同一个标签指定相同的CSS样式。但是在实际运用中，HTML文档中的同一个标签会被反复使用。若要为相同的标签赋予不同的CSS样式就应使用类选择器。

.test {color:#f00; border:1px solid #00f;}

3、ID选择器，ID选择器和类选择器有些类似，但是差别又十分显著。首先一个元素不能像类属性一样拥有多个类，一个元素只能拥有一个唯一的ID属性。其次一个ID值在一个HTML文档中只能出现一次，也就是一个ID只能唯一标识一个元素(不是一类元素，而是一个元素)，也就是说ID选择器获取到的独一无二的一个元素。

#test {color:#f00; border:1px solid #00f;}

4、属性选择器，如果我们希望根据属性值来选择元素，我们可以简单的通过属性选择器来获取对应的元素，比如我们可以将所有type为text的input标签设置统一样式

input[type="text"] {color:#f00; border:1px solid #00f;}

5、父子选择器，选择某元素瞎 main的某一标签，比如类名content的div下所有的li标签

.content li {color:#f00; border:1px solid #00f;}

6、伪类选择器，比如我们可以为a标签中激活的、访问过的、打开时，hover时分别设置不同的样式

a:link {color:green; font-size: 50px}
a:hover {color:pink; font-size: 50px}
a:active {color:yellow; font-size: 50px}
a:visited {color:red; font-size: 50px}

7、兄弟选择器，便于我们选择相邻的元素，比如10个元素，我们想对除了第一个之外的其他li元素都设置一个距左的margin，我们可以这样写

li + li { margin-left: 10px; }

三、模拟checkbox和radiobox

讲完了CSS选择器，我们继续回到模拟checkbox和radiobox这个话题上，这个时候我们可以有两种选择

1、使用伪类选择器

HTML:

<input type="checkbox" />

CSS:

input[type=checkbox] {
  position: relative;
  width: 10px;
  height: 1px;
}
input[type=checkbox]::before{
  content:'';
  position: absolute;
  top: -5px;
  left: -5px;
  width: 22px;
  height: 22px;
  line-height:22px;
  text-align: center;
  font-size:16px;
  background-image: url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjIxIiB2aWV3Qm94PSIwIDAgMjEgMjEiIHdpZHRoPSIyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PGZpbHRlciBpZD0iYSIgaGVpZ2h0PSIyMDcuNyUiIHdpZHRoPSIyMDcuNyUiIHg9Ii01My44JSIgeT0iLTM4LjUlIj48ZmVPZmZzZXQgZHg9IjAiIGR5PSIyIiBpbj0iU291cmNlQWxwaGEiIHJlc3VsdD0ic2hhZG93T2Zmc2V0T3V0ZXIxIi8+PGZlR2F1c3NpYW5CbHVyIGluPSJzaGFkb3dPZmZzZXRPdXRlcjEiIHJlc3VsdD0ic2hhZG93Qmx1ck91dGVyMSIgc3RkRGV2aWF0aW9uPSIyIi8+PGZlQ29sb3JNYXRyaXggaW49InNoYWRvd0JsdXJPdXRlcjEiIHJlc3VsdD0ic2hhZG93TWF0cml4T3V0ZXIxIiB0eXBlPSJtYXRyaXgiIHZhbHVlcz0iMCAwIDAgMCAwICAgMCAwIDAgMCAwICAgMCAwIDAgMCAwICAwIDAgMCAwLjE2IDAiLz48ZmVNZXJnZT48ZmVNZXJnZU5vZGUgaW49InNoYWRvd01hdHJpeE91dGVyMSIvPjxmZU1lcmdlTm9kZSBpbj0iU291cmNlR3JhcGhpYyIvPjwvZmVNZXJnZT48L2ZpbHRlcj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGZpbHRlcj0idXJsKCNhKSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNCAyKSI+PHJlY3QgZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJub256ZXJvIiBoZWlnaHQ9IjEzIiByeD0iMiIgd2lkdGg9IjEzIi8+PHJlY3QgaGVpZ2h0PSIxMiIgcng9IjEuNSIgc3Ryb2tlPSIjOTU5ODlhIiB3aWR0aD0iMTIiIHg9Ii41IiB5PSIuNSIvPjwvZz48L3N2Zz4=);
  border-radius: 4px;
}
input[type=checkbox]:checked::before {
  background-image: url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjIxIiB2aWV3Qm94PSIwIDAgMjEgMjEiIHdpZHRoPSIyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PGZpbHRlciBpZD0iYSIgaGVpZ2h0PSIyMDcuNyUiIHdpZHRoPSIyMDcuNyUiIHg9Ii01My44JSIgeT0iLTM4LjUlIj48ZmVPZmZzZXQgZHg9IjAiIGR5PSIyIiBpbj0iU291cmNlQWxwaGEiIHJlc3VsdD0ic2hhZG93T2Zmc2V0T3V0ZXIxIi8+PGZlR2F1c3NpYW5CbHVyIGluPSJzaGFkb3dPZmZzZXRPdXRlcjEiIHJlc3VsdD0ic2hhZG93Qmx1ck91dGVyMSIgc3RkRGV2aWF0aW9uPSIyIi8+PGZlQ29sb3JNYXRyaXggaW49InNoYWRvd0JsdXJPdXRlcjEiIHJlc3VsdD0ic2hhZG93TWF0cml4T3V0ZXIxIiB0eXBlPSJtYXRyaXgiIHZhbHVlcz0iMCAwIDAgMCAwICAgMCAwIDAgMCAwICAgMCAwIDAgMCAwICAwIDAgMCAwLjE2IDAiLz48ZmVNZXJnZT48ZmVNZXJnZU5vZGUgaW49InNoYWRvd01hdHJpeE91dGVyMSIvPjxmZU1lcmdlTm9kZSBpbj0iU291cmNlR3JhcGhpYyIvPjwvZmVNZXJnZT48L2ZpbHRlcj48ZyBmaWxsPSJub25lIiBmaWx0ZXI9InVybCgjYSkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQgMikiPjxyZWN0IGZpbGw9IiM3YjdiN2IiIGhlaWdodD0iMTMiIHJ4PSIyIiB3aWR0aD0iMTMiLz48cGF0aCBkPSJtMi45OCA4LjNjLS4xNDQ3NzE3Mi4wMDEzNTE1NC0uMjg0MDg4NTktLjA1NTE2NzE5LS4zODctLjE1N2wtMi40MTQtMi40ODdjLS4yMTkzMjU1Ny0uMjE3NTY5My0uMjI0MTEwMDQtLjU3MDY3NzIyLS4wMTA3NTk4NC0uNzk0MTA5MDkuMjEzMzUwMTktLjIyMzQzMTg4LjU2NjMwMjgxLS4yMzQ5NDQ1MS43OTM3NTk4NC0uMDI1ODkwOTFsMS43NjkgMS4yNjJjLjA0ODc4MTE3LjA0MzUzMjcyLjExMzcyNTE4LjA2NDM1NDgxLjE3ODcyNDg2LjA1NzMwMjA2cy4xMjM5NjYyOC0uMDQxMzE5NjkuMTYyMjc1MTQtLjA5NDMwMjA2bDQuMTkxLTUuMTc3Yy4xMTU3MTQzNi0uMTc3Mjc5OTcuMzIwNjg4NzQtLjI3NTE2Mzg0LjUzMTMwMjQzLS4yNTM3MTkyMi4yMTA2MTM3LjAyMTQ0NDYyLjM5MTY1MzE3LjE1ODYzMjMxLjQ2OTI2MjExLjM1NTU5NjM5LjA3NzYwODk0LjE5Njk2NDA5LjAzODgxMTU0LjQyMDc3MzE5LS4xMDA1NjQ1NC41ODAxMjI4M2wtNC43MzUgNi41Yy0uMDk3NDAxMjEuMTI3OTQxNTgtLjI0NDcwMjUyLjIwODMyMDgxLS40MDUuMjIxLS4wMTI4NjU4OC4wMDgyMDM1MS0uMDI3NzQ0Mi4wMTI3MDE2MS0uMDQzLjAxM3oiIGZpbGw9IiNmZmYiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIgMikiLz48L2c+PC9zdmc+);
}

这个虽然也能实现效果，但是不太灵活，模拟的图片需要定位上去盖住原来的原生checkbox。

2、使用兄弟选择器

首先看一下结构：


<div class="checkbox">
<input type="checkbox" />
<span class="text">something to be checked</span>
</div>

CSS样式：

.checkbox {
  position: relative;
}
.checkbox span {
  display: inline-block;
  vertical-align: middle;
}
input[type=checkbox] {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
}
input[type=checkbox] + .icon {
  width: 22px;
  height: 22px;
  background-image: url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjIxIiB2aWV3Qm94PSIwIDAgMjEgMjEiIHdpZHRoPSIyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PGZpbHRlciBpZD0iYSIgaGVpZ2h0PSIyMDcuNyUiIHdpZHRoPSIyMDcuNyUiIHg9Ii01My44JSIgeT0iLTM4LjUlIj48ZmVPZmZzZXQgZHg9IjAiIGR5PSIyIiBpbj0iU291cmNlQWxwaGEiIHJlc3VsdD0ic2hhZG93T2Zmc2V0T3V0ZXIxIi8+PGZlR2F1c3NpYW5CbHVyIGluPSJzaGFkb3dPZmZzZXRPdXRlcjEiIHJlc3VsdD0ic2hhZG93Qmx1ck91dGVyMSIgc3RkRGV2aWF0aW9uPSIyIi8+PGZlQ29sb3JNYXRyaXggaW49InNoYWRvd0JsdXJPdXRlcjEiIHJlc3VsdD0ic2hhZG93TWF0cml4T3V0ZXIxIiB0eXBlPSJtYXRyaXgiIHZhbHVlcz0iMCAwIDAgMCAwICAgMCAwIDAgMCAwICAgMCAwIDAgMCAwICAwIDAgMCAwLjE2IDAiLz48ZmVNZXJnZT48ZmVNZXJnZU5vZGUgaW49InNoYWRvd01hdHJpeE91dGVyMSIvPjxmZU1lcmdlTm9kZSBpbj0iU291cmNlR3JhcGhpYyIvPjwvZmVNZXJnZT48L2ZpbHRlcj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGZpbHRlcj0idXJsKCNhKSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNCAyKSI+PHJlY3QgZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJub256ZXJvIiBoZWlnaHQ9IjEzIiByeD0iMiIgd2lkdGg9IjEzIi8+PHJlY3QgaGVpZ2h0PSIxMiIgcng9IjEuNSIgc3Ryb2tlPSIjOTU5ODlhIiB3aWR0aD0iMTIiIHg9Ii41IiB5PSIuNSIvPjwvZz48L3N2Zz4=);
}
input[type=checkbox]:checked + .icon {
  background-image: url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjIxIiB2aWV3Qm94PSIwIDAgMjEgMjEiIHdpZHRoPSIyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PGZpbHRlciBpZD0iYSIgaGVpZ2h0PSIyMDcuNyUiIHdpZHRoPSIyMDcuNyUiIHg9Ii01My44JSIgeT0iLTM4LjUlIj48ZmVPZmZzZXQgZHg9IjAiIGR5PSIyIiBpbj0iU291cmNlQWxwaGEiIHJlc3VsdD0ic2hhZG93T2Zmc2V0T3V0ZXIxIi8+PGZlR2F1c3NpYW5CbHVyIGluPSJzaGFkb3dPZmZzZXRPdXRlcjEiIHJlc3VsdD0ic2hhZG93Qmx1ck91dGVyMSIgc3RkRGV2aWF0aW9uPSIyIi8+PGZlQ29sb3JNYXRyaXggaW49InNoYWRvd0JsdXJPdXRlcjEiIHJlc3VsdD0ic2hhZG93TWF0cml4T3V0ZXIxIiB0eXBlPSJtYXRyaXgiIHZhbHVlcz0iMCAwIDAgMCAwICAgMCAwIDAgMCAwICAgMCAwIDAgMCAwICAwIDAgMCAwLjE2IDAiLz48ZmVNZXJnZT48ZmVNZXJnZU5vZGUgaW49InNoYWRvd01hdHJpeE91dGVyMSIvPjxmZU1lcmdlTm9kZSBpbj0iU291cmNlR3JhcGhpYyIvPjwvZmVNZXJnZT48L2ZpbHRlcj48ZyBmaWxsPSJub25lIiBmaWx0ZXI9InVybCgjYSkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQgMikiPjxyZWN0IGZpbGw9IiM3YjdiN2IiIGhlaWdodD0iMTMiIHJ4PSIyIiB3aWR0aD0iMTMiLz48cGF0aCBkPSJtMi45OCA4LjNjLS4xNDQ3NzE3Mi4wMDEzNTE1NC0uMjg0MDg4NTktLjA1NTE2NzE5LS4zODctLjE1N2wtMi40MTQtMi40ODdjLS4yMTkzMjU1Ny0uMjE3NTY5My0uMjI0MTEwMDQtLjU3MDY3NzIyLS4wMTA3NTk4NC0uNzk0MTA5MDkuMjEzMzUwMTktLjIyMzQzMTg4LjU2NjMwMjgxLS4yMzQ5NDQ1MS43OTM3NTk4NC0uMDI1ODkwOTFsMS43NjkgMS4yNjJjLjA0ODc4MTE3LjA0MzUzMjcyLjExMzcyNTE4LjA2NDM1NDgxLjE3ODcyNDg2LjA1NzMwMjA2cy4xMjM5NjYyOC0uMDQxMzE5NjkuMTYyMjc1MTQtLjA5NDMwMjA2bDQuMTkxLTUuMTc3Yy4xMTU3MTQzNi0uMTc3Mjc5OTcuMzIwNjg4NzQtLjI3NTE2Mzg0LjUzMTMwMjQzLS4yNTM3MTkyMi4yMTA2MTM3LjAyMTQ0NDYyLjM5MTY1MzE3LjE1ODYzMjMxLjQ2OTI2MjExLjM1NTU5NjM5LjA3NzYwODk0LjE5Njk2NDA5LjAzODgxMTU0LjQyMDc3MzE5LS4xMDA1NjQ1NC41ODAxMjI4M2wtNC43MzUgNi41Yy0uMDk3NDAxMjEuMTI3OTQxNTgtLjI0NDcwMjUyLjIwODMyMDgxLS40MDUuMjIxLS4wMTI4NjU4OC4wMDgyMDM1MS0uMDI3NzQ0Mi4wMTI3MDE2MS0uMDQzLjAxM3oiIGZpbGw9IiNmZmYiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIgMikiLz48L2c+PC9zdmc+);
}

这种方法实现有点儿就是兼容性特别的好，而且比较灵活。

好了，文章到此就结束了，文章中并没有演示模拟radiobox，其实原理都差不多，搞懂了这些css选择器，实现这个就是分分钟的事情了，有兴趣的朋友可以自己去试一下。