# 纯CSS 单/复选框 美化icheckbox
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no" name="viewport" />
<style type="text/css">
body {
font: 14px/150% microsoft yahei,tahoma;
}
.clear {
clear: both
}
.RadioStyle input {
display: none
}
.RadioStyle label {
border: 2px solid #CCC;
color: #666;
padding: 2px 10px 2px 5px;
line-height: 28px;
min-width: 80px;
text-align: center;
float: left;
margin: 2px;
border-radius: 4px
}
.RadioStyle input:checked + label {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpGNkZFNDAzQjg3NTkxMUU1ODY5MkRDQjM3NTM0RTE0OSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpGNkZFNDAzQzg3NTkxMUU1ODY5MkRDQjM3NTM0RTE0OSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkY2RkU0MDM5ODc1OTExRTU4NjkyRENCMzc1MzRFMTQ5IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkY2RkU0MDNBODc1OTExRTU4NjkyRENCMzc1MzRFMTQ5Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+SnDYjQAAASxJREFUeNpiZJj6n4GKoJ6JmoYBcQMTNQ0DMZioaRg1DEQxjFIDMQwDARZCuv5nYYoxTsNuGFkuxGcYyQZiM4wL6MdjQQwMyZokGojLZTUmDAyWEgwM1pIkGIjLMA1BBoYifQaGtz8YGMqPExkp+MJsqh0DAzszA0PeYQaG19+JcyFOw6JUGRicpBkYTr5kYJhznbhIwWkYPxsDQ681A8NfYLmSeZCB4d9/wgaiGJaqxcCw3YeBQUsQwm8xZ2CQ4GJgmHaFgeH8G8IJG8Nl/ooMDB5yDAwuMgwMK+4wMEQCvfv8GzCGTxJOh1i96bsVGGa7GRieAQ2JUWNgYGZkYCg+ysDw6ReWSEQqYPHmAFgiLjJgYDARZWAI2I4jVUANJGgYsYCJmoaBAECAAQAYvUgCAzfyUAAAAABJRU5ErkJggg==") no-repeat right bottom;
border: 2px solid #00a4ff;
background-size: 21px 21px;
color: #00a4ff
}
.RadioStyle input:disabled + label {
opacity: 0.7;
}
</style>
<title>纯CSS 单/复选框 美化</title>
</head>
<body>
请选择iPhone 型号
<div class="RadioStyle">
<div class="Block PaddingL">
<input type="radio" name="Storage" id="model1" />
<label for="model1">iPhone 6s</label>
<input type="radio" name="Storage" id="model2" />
<label for="model2">iPhone 6s Plus</label>
<input type="radio" name="Storage" id="model3" />
<label for="model3">iPhone 7</label>
<input type="radio" name="Storage" id="model4" checked />
<label for="model4">iPhone 7 Plus</label>
</div>
</div>
<div class="clear"></div>
<p> </p>
<p> </p>
选择兴趣爱好
<div class="RadioStyle">
<div class="Block PaddingL">
<input type="checkbox" id="love1" />
<label for="love1">女</label>
<input type="checkbox" id="love2" />
<label for="love2">绘画</label>
<input type="checkbox" id="love3" />
<label for="love3">摄影</label>
<input type="checkbox" id="love4" checked />
<label for="love4">骑行</label>
</div>
</div>
<div class="clear"></div>
<p> </p>
<p> </p>
不可用
<div class="RadioStyle">
<div class="Block PaddingL">
<input type="checkbox" id="dis1" checked disabled />
<label for="dis1">2年不离网</label>
<input type="checkbox" id="dis2" disabled />
<label for="dis2">2年不变更套餐</label>
</div>
</div>
<div class="clear"></div>
<p> </p>
<p> </p>
原理在这里 input:checked + label
</body>
</html>