前面讲过《完全使用css编写复选框》，后来在深入学习sass过程中，发现：这种写法虽然也能达到目的，但是稍嫌复杂了一点。这里介绍一种可以说更简单一点的方法，其实也就是html结构更简单一点，就css而言，也差不多吧。
还是以复选框为例吧。
<label><input type="checkbox" name="name" checked />选项一</label>
其实核心的html结构也就是我们正常使用的input[type=checkbox]的写法，关键在于可以用css清除其默认样式，这是我之前一直忽略或者说完全不知情的一条css语句。
input[type=checkbox]{
-webkit-appearance: none;
appearance: none;
}
appearance: none; 清除了整个[type=checkbox]的默认样式，由于涉及到兼容性的问题，一般主要用于移动端的清除复选框和单选框的默认样式。
input[type=checkbox]{
-webkit-appearance: none;
appearance: none;
display: inline-block;
cursor: pointer;
vertical-align: middle;
background-repeat: no-repeat;
-webkit-transition: background-position .15s cubic-bezier(.8, 0, 1, 1),
-webkit-transform .25s cubic-bezier(.8, 0, 1, 1);
transition: background-position .15s cubic-bezier(.8, 0, 1, 1),
-webkit-transform .25s cubic-bezier(.8, 0, 1, 1);
outline: none;
width: 24px;
height: 24px;
margin: 0 6px;
background-image: url(default.png);
background-size: 75% 75%;
-webkit-box-shadow: hsla(0,0%,100%, .15) 0 1px 1px, inset hsla(0,0%,0%,.5) 0 0 0 1px;
box-shadow: hsla(0,0%,100%, .15) 0 1px 1px, inset hsla(0,0%,0%,.5) 0 0 0 1px;
border-color: #ff7b11;
}
input[type=checkbox]:checked{
-webkit-transition: background-position .2s .15s cubic-bezier(0, 0, .2, 1),
-webkit-transform .25s cubic-bezier(0, 0, .2, 1);
transition: background-position .2s .15s cubic-bezier(0, 0, .2, 1),
-webkit-transform .25s cubic-bezier(0, 0, .2, 1);
}
input[type=checkbox]:active{
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: -webkit-transform .1s cubic-bezier(0, 0, .2, 1);
transition: -webkit-transform .1s cubic-bezier(0, 0, .2, 1);
}
input[type=checkbox],
input[type=checkbox]:active,
input[type=checkbox]:checked ~ input[type=checkbox],
input[type=checkbox]:checked ~ input[type=checkbox]:active {
background-position: center -24px;
}
input[type=checkbox]:checked {
background-position: center center;
}
这就实现自定义的checkbox样式了，再也不用使用各种标签，并通过js模拟来实现简单的单选和复选框的问题了。