纯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.进度条样式
原理：为三个页面的进度条分别设置不同的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定义当前值。
效果：
本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！
