代码:
<style type="text/css">
body {
font: 16px/150% microsoft yahei,pingfang sc,Tahoma,Sim sun;
}
input:disabled + label {/*禁用的指针*/
cursor: not-allowed
}
.Radio input,
.Checkbox input {
display: none
}
.Radio label,
.Checkbox label {
padding: 0 16px 0 0;
display: inline-block;
cursor: pointer;
position: relative
}
.Radio label:before,
.Checkbox label:before {
box-sizing: border-box;
content: "";
width: 18px;
height: 18px;
border-radius: 50%;
border: 1px solid #999;
margin: 0 8px;
vertical-align: middle;
display: inline-block;
transition: 0.1S;
}
.Radio label:hover:before,
.Checkbox label:hover:before {
border-color: #00a4ff;
}
.Radio input:disabled + label:before,
.Checkbox input:disabled + label:before {
background-color: #CCC;
border-color: #999;
opacity: 0.5;
}
.Radio input:disabled + label,
.Checkbox input:disabled + label {
opacity: 0.5;
}
.Radio input:checked + label:before {
border: 5px solid #00a4ff;
}
.Checkbox label:before {
background: url(images/ico_tick.svg) no-repeat center;
background-size: 0;
border-radius: 4px;
transition: 0.2S;
}
.Checkbox input:checked + label:before {
background-color: #00a4ff;
background-size: 16px;
border-color: #00a4ff;
}
.HoverLabel label {
display: block;
border-radius: 4px;
padding: 4px;
width: 100%;
}
.HoverLabel label:hover {
background-color: #EEE;
}
</style>
效果: