纯css3自定义复选框checkbox样式

html:部分：

<div class=" tiaojianlist03">
<input name="checkbox" value="Item 1" type="checkbox" >
</div>

css：部分

.tiaojianlist03{ position: relative; }
.tiaojianlist03 input[type=checkbox]{ position: absolute; width: 12px; height: 12px; border: 1px #dfdfdd solid; -webkit-appearance: none;}
.tiaojianlist03 input[type=checkbox]:before{ position:absolute;content: ''; width: 12px; height: 12px; top: 0px;}
.tiaojianlist03 input[type=checkbox]:checked:before {color: #007aff; background: url(../images/regisgg_03.png) no-repeat;}