纯css3单选框美化样式

先将原单选框隐藏：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;
	}