input checkbox樣式重定義

一：html

<div class="deal">
    <input type="checkbox" name="checkbox" id="checkbox" checked value=""/>
    <span></span>  
    <label for="checkbox">我已閱讀並同意</label>
</div>

二：css

.deal {
	width: 100%;
	margin: 35px auto 0;
	text-align: center;
	color: white;
	font-size: 15px;
}

.deal input[type='checkbox'] {
	appearance: none;
	-webkit-appearance: none;
	outline: none;
	display: none;
}

.deal input[type='checkbox']+span {
	width: 16px;
	height: 16px;
	display: inline-block;
	background: url(../img/nocheck.png) no-repeat center;
	background-size: 100% 100%;
	position: relative;
	top: 2px;
}
.deal input[type='checkbox']:checked+span {
	width: 16px;
	height: 16px;
	display: inline-block;
	background: url(../img/check.png) no-repeat center;
	background-size: 100% 100%;
	position: relative;
	top: 2px;
}