纯css设置单选框/进度条样式

1.设置radio样式

注意：radio的id要和对应的label 的for相同。

原理：使用 :checked+label 切换样式图片。checkbox也可以这么做。

CSS:

            input[type=radio] {
            	float: left;
            	visibility: hidden;
            }	
            label {
            	float: left;
            	 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定义当前值。

效果：