需要用到的素材

效果

CSS样式

.pretty_checkbox>div {
	position: relative;
}

.pretty_checkbox input[type=checkbox] {
	width: 16px;
	height: 16px;
	position: absolute;
	opacity: 0;
	cursor: pointer;
	z-index: 2;
	font-size: initial;
}

.pretty_checkbox .pretty_label {
	color: #000;
	margin-left: 25px;
	cursor: pointer;
}

.pretty_checkbox .pretty_label::selection {
	background: rgba(0,0,0,0);
}

.pretty_checkbox span {
	position: absolute;
	top: 4px;
	width: 14px;
	height: 14px;
	border: 1px solid #d6d6d6;
	border-radius: 3px;
	background: url(img/fork_green.png);
	background-size: 14px;
	background-repeat: no-repeat;
	background-position-x: 0px;
	background-position-y: 20px;
	-webkit-transition: background-position-y 0.1s linear;
	-o-transition: background-position-y 0.1s linear;
	transition: background-position-y 0.1s linear;
}

.pretty_checkbox input[type=checkbox]:checked+span {
	background-position-y: 0px;
}

HTML样例

<div class="pretty_checkbox">
    <div>
        <input type="checkbox" id="remember-me-checkbox"> <span></span>
        <label class="pretty_label" for="remember-me-checkbox">记住我</label>
    </div>
</div>

JS获取是否选中

if (!$('#remember-me-checkbox').prop('checked')) {
    alert('请先勾选复选框');
    return false;
}