.mycheck {
width:25px;
margin:20px 100px;
position:relative;
}
.mycheck input[type=checkbox] {
visibility:hidden;
}
.mycheck label {
cursor:pointer;
position:absolute;
width:25px;
height:25px;
top:0;
left:0;
background:#fff;
border:2px solid #ccc;
-moz-border-radius:50%;
-webkit-border-radius:50%;
border-radius:50%;
}
.mycheck label:after {
opacity:0;
content:'';
position:absolute;
width:9px;
height:5px;
background:transparent;
top:6px;
left:6px;
border:4px solid #fff;
border-top:none;
border-right:none;
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
transform:rotate(-45deg);
}
.mycheck input[type=checkbox]:checked + label {
background:#f40;
border:2px solid #f40;
}
.mycheck input[type=checkbox]:checked + label:after {
opacity:1;
background:#f40;
}
简单的css样式更改