先将原单选框隐藏:display:none;
再美化。
<div class="select_btn">
<input type="checkbox" id="checkbox_meihua" class="checkbox_style" name="select" value="10天内自动登录" checked="checked">
<label for="checkbox_meihua"></label>
</div>
.select_btn{font-size: 14px ;padding: 0px 30px;margin-top: 5px;}
.checkbox_style{display: none;} //先隐藏
label{display: inline;}
.checkbox_style + label{
background-color: #FFF;
border: 1px solid #e2e2e2;
padding: 7px;
display: inline-block;
position: relative;
float: left;
}
.checkbox_style:checked + label{
background-color: #fff;
border: 1px solid #e5e5e5;
color: #243441;
}
.checkbox_style:checked + label:after{
content: ' \2714';
position: absolute;
top: 0px;
left: 0px;
width: 100%;
padding: 0 0 1px;
color: #758794;
text-align: center;
font-size: 12px;
}