1.设置radio样式
注意：radio的id要和对应的label 的for相同。
原理：使用 :checked+label 切换样式图片。checkbox也可以这么做。
CSS:
input[type=radio] {
float: left;
visibility: hidden;
}
label {
float: left;
width: 16px;
height: 15px;
margin: 18px 5px 0 0;
background: url(../images/arrow.png) no-repeat;
cursor: pointer;
}
.l1 {
background-position: -237px -184px;
background-size: 250px;
}
.l2 {
background-position: -236px -156px;
background-size: 250px;
}
#r1:checked + label {
background-position: -210px -184px;
}
#r2:checked + label {
background-position: -212px -156px;
}
HTML:
<div class="male"> <input type="radio" checked="checked" name="sexlist" id="r1" /> <label for="r1" class="l1"></label>男 </div> <div class="female"> <input type="radio" name="sexlist" id="r2" /> <label for="r2" class="l2"></label>女 </div>
效果：
2.进度条样式（摘自http://lab.tianyizone.com/demo/form/form_demo_css.html）
原理：为三个页面的进度条分别设置不同的value，由此切换背景图片。
CSS:
progress {display: block;width: 300px;height: 35px;margin-bottom:10px;-webkit-appearance:none;} progress::-webkit-progress-bar { background: url(bg_step.png) no-repeat 0 0; } progress::-webkit-progress-value { background: url(bg_step.png) no-repeat 0 -50px; } progress[value="2"]::-webkit-progress-value { background-position: 0 -100px; } progress[value="3"]::-webkit-progress-value { background-position: 0 -150px; }
HTML:
<progress max="3" value="2"></progress>
其中max定义完成值，value定义当前值。
效果：
原文：http://www.cnblogs.com/17shiooo/p/5077054.html