效果图:
input[type=checkbox],input[type=radio]{
-webkit-appearance: none;
appearance: none;
width: 16px;
height: 16px;
margin: 0;
cursor: pointer;
vertical-align: bottom;
background: #fff;
border: 1px solid #d2d2d2;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 2px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
position: relative;
color: #FFF;
}
input[type=checkbox]:active,input[type=radio]:active {
border-color: #5FB878;
background: #5FB878;
}
input[type=checkbox]:hover {
border-color: #5FB878;
-webkit-box-shadow: 0 0 2px #5FB878;
-moz-box-shadow: 0 0 2px #5FB878;
box-shadow: 0 0 2px #5FB878;
}
input[type=checkbox]:checked,input[type=radio]:checked {
background: #5FB878;
border-color: #5FB878;
}
input[type=checkbox]:checked::after {
content: '\2713';
font-size: 12px;
display: block;
position: absolute;
top: 0;
right: 0;
left: 3px;
transform:rotate(9deg);
}
input[type=checkbox]:focus {
outline: none;
border-color: green;
}