如何巧用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" />

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(check.png);

  border-radius: 4px;

}

input[type=checkbox]:checked::before {

  background-image: url(check_checked.png);

}

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