Radio Button Based Star Rating System

Preview:

Description:

A plain HTML/CSS based rating system that uses SVG stars for rating symbols. Comes with a smooth select / deselect effect based on CSS3 transitions.

How to use it:

Create radio buttons for the 5 star rating system.

<input type="radio" name="stars" id="star-null">
<input type="radio" name="stars" id="star-1">
<input type="radio" name="stars" id="star-2">
<input type="radio" name="stars" id="star-3" checked>
<input type="radio" name="stars" id="star-4">
<input type="radio" name="stars" id="star-5">

Wrap the SVG stars into label elements as follow:

<label for="star-1">
 <svg width="255" height="240" viewBox="0 0 51 48">
 <path d="m25,1 6,17h18l-14,11 5,17-15-10-15,10 5-17-14-11h18z"/>
 </svg> 
</label>
<label for="star-2">
 <svg width="255" height="240" viewBox="0 0 51 48">
 <path d="m25,1 6,17h18l-14,11 5,17-15-10-15,10 5-17-14-11h18z"/>
 </svg> 
</label>
<label for="star-3">
 <svg width="255" height="240" viewBox="0 0 51 48">
 <path d="m25,1 6,17h18l-14,11 5,17-15-10-15,10 5-17-14-11h18z"/>
 </svg> 
</label>
<label for="star-4">
 <svg width="255" height="240" viewBox="0 0 51 48">
 <path d="m25,1 6,17h18l-14,11 5,17-15-10-15,10 5-17-14-11h18z"/>
 </svg> 
</label>
<label for="star-5"> 
 <svg width="255" height="240" viewBox="0 0 51 48">
 <path d="m25,1 6,17h18l-14,11 5,17-15-10-15,10 5-17-14-11h18z"/>
 </svg> 
</label>
<label for="star-null"> Clear </label>

Style the rating system with the following CSS snippets.

#star-1:checked ~ section [for='star-1'] svg, #star-2:checked ~ section [for='star-1'] svg, #star-2:checked ~ section [for='star-2'] svg, #star-3:checked ~ section [for='star-1'] svg, #star-3:checked ~ section [for='star-2'] svg, #star-3:checked ~ section [for='star-3'] svg, #star-4:checked ~ section [for='star-1'] svg, #star-4:checked ~ section [for='star-2'] svg, #star-4:checked ~ section [for='star-3'] svg, #star-4:checked ~ section [for='star-4'] svg, #star-5:checked ~ section [for='star-1'] svg, #star-5:checked ~ section [for='star-2'] svg, #star-5:checked ~ section [for='star-3'] svg, #star-5:checked ~ section [for='star-4'] svg, #star-5:checked ~ section [for='star-5'] svg {
 -webkit-transform: scale(1);
 transform: scale(1);
}
#star-1:checked ~ section [for='star-1'] svg path, #star-2:checked ~ section [for='star-1'] svg path, #star-2:checked ~ section [for='star-2'] svg path, #star-3:checked ~ section [for='star-1'] svg path, #star-3:checked ~ section [for='star-2'] svg path, #star-3:checked ~ section [for='star-3'] svg path, #star-4:checked ~ section [for='star-1'] svg path, #star-4:checked ~ section [for='star-2'] svg path, #star-4:checked ~ section [for='star-3'] svg path, #star-4:checked ~ section [for='star-4'] svg path, #star-5:checked ~ section [for='star-1'] svg path, #star-5:checked ~ section [for='star-2'] svg path, #star-5:checked ~ section [for='star-3'] svg path, #star-5:checked ~ section [for='star-4'] svg path, #star-5:checked ~ section [for='star-5'] svg path {
 fill: #FFBB00;
 stroke: #cc9600;
}
section {
 width: 300px;
 text-align: center;
 position: absolute;
 top: 50%;
 left: 50%;
 -webkit-transform: translate3d(-50%, -50%, 0);
 transform: translate3d(-50%, -50%, 0);
}
label {
 display: inline-block;
 width: 50px;
 text-align: center;
 cursor: pointer;
}
label svg {
 width: 100%;
 height: auto;
 fill: white;
 stroke: #CCC;
 -webkit-transform: scale(0.8);
 transform: scale(0.8);
 -webkit-transition: -webkit-transform 200ms ease-in-out;
 transition: -webkit-transform 200ms ease-in-out;
 transition: transform 200ms ease-in-out;
 transition: transform 200ms ease-in-out, -webkit-transform 200ms ease-in-out;
}
label svg path {
 -webkit-transition: fill 200ms ease-in-out, stroke 100ms ease-in-out;
 transition: fill 200ms ease-in-out, stroke 100ms ease-in-out;
}
label[for="star-null"] {
 display: block;
 margin: 0 auto;
 color: #999;
}