效果图如下:
<input class="choose" type="checkbox">
给复选框checkbox加样式:
/*设置复选框的样式*/
input[type=checkbox]{
width: 23px;
height: 23px;
border-radius: 50%;
background-color:none;
border: 1px solid #2DA7E0;
zoom: 1;
outline: none;
-webkit-appearance:none;/*去除默认样式*/
-webkit-appearance:none;
-moz-appearance:none;
-o-appearance:none;
-ms-appearance:none;
}
/*设置复选框选中时的样式*/
input[type=checkbox]:checked{
background-image: url(../images/choose.png);/*引入背景图*/
background-size:100%;/*设置背景图大小*/
}