美化复选框

背景图片法

关于复选框的样式美化如果要做到兼容性较好的话可以用图片制作，如果只要求满足移动web的样式可以用css3实现绚丽的效果。下面利用图片来美化复选框。思路是将checkbox隐藏起来，通过给label添加背景图片来实现效果。

准备图片：

　　　　<div class="checkbox">
		<input type="checkbox" id="chk1">
		<label for="chk1">城市</label>
	</div>

按照以上所说思路给label添加背景图片，覆盖原生checkbox：

　　　　.checkbox{
		position: relative;
	}
	input[type='checkbox']{
		position: absolute;
	}
	input[type='checkbox']:checked+label{
		background-image:url(cked.jpg);
		color: #56ABE4;
	}
	label{
		background: url(ck.jpg) no-repeat 0 center;
		padding-left: 20px;
		background-size: 15px 15px;
		cursor: pointer;
		position: absolute;
	}

这样在Chrome和Firefox已经都是显示没问题。

不过这里有个问题，Ie8下因为对伪类：checked无法支持，所以点击选中和非选中状态切换时无法实现效果，这时需要使用javascript通过增加类和删除类来完成该效果。

css修改为：

input[type='checkbox']{
		display: none;
	}
	input[type='checkbox']:checked+label{
		background-image:url(cked.jpg);
		color: #56ABE4;
	}
        label.checked{
		background-image:url(cked.jpg);
		color: #56ABE4;
	}
	label{
		background: url(ck.jpg) no-repeat 0 center;
		padding-left: 20px;
		background-size: 15px 15px;
		cursor: pointer;
	}

jq判断当前是否为选中状态，来增加、删除类：

jQuery(document).ready(function($) {
		$('input[type="checkbox"]').on('change', function() {
			var isChecked = $(this).is(':checked');
			if(isChecked){
				$(this).parents('.checkbox').find('label').addClass('checked');
			}else{
				$(this).parents('.checkbox').find('label').removeClass('checked');
			}
		});
	});