Set Radio Button and Progress Bar Styles in CSS

1. Set the Radio Style in CSS

Please note that the id of the radio should be the same as the for of the corresponding label.

Principle

Use :checked+label to toggle style images. The checkbox can do the same.

CSS Example

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 Example

<div class="male">
     <input type="radio" checked="checked" name="sexlist" id="r1" />
     <label for="r1" class="l1"></label>Male
</div>
<div class="female">
     <input type="radio" name="sexlist" id="r2" />
     <label for="r2" class="l2"></label>Female
</div>

2. Set the Progress Bar Style in CSS

Principle

Set different values for the progress bars of the three pages to switch the background image.

CSS Example

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 Example

<progress max="3" value="2"></progress>

Where max defines the completion value and value defines the current value.