純css設定單選框/進度條樣式

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定義目前值。

效果：