Simple CSS3 Star rating system demo with tutorial
Here is a simple 5 star rating demo with code which is built on pure CSS (CSS3). Bottom of the explanation code you can find the live demo button. If you think its is useful then please share!
CSS
.wrapper{
float:left;
width: auto;
margin:8% 0 0 35%;
}
.css3-rating-stars,
.css3-rating-stars label::before{
display: inline-block;
}
.css3-rating-stars label:hover,
.css3-rating-stars label:hover ~ label{
color: #06befb;
}
.css3-rating-stars *{
margin: 0;
padding: 0;
}
.css3-rating-stars input{
display: none;
}
.css3-rating-stars{
unicode-bidi: bidi-override;
direction: rtl;
}
.css3-rating-stars label{
color: #ccc;
}
.css3-rating-stars label::before{
content: "\2605";
width: 48px;
line-height: 18px;
text-align: center;
font-size: 48px;
cursor: pointer;
}
.css3-rating-stars input:checked ~ label{
color: #f5b301;
}
.css3-rating-disabled{
opacity: .50;
-webkit-pointer-events: none;
-moz-pointer-events: none;
pointer-events: none;
} |
.wrapper{
float:left;
width: auto;
margin:8% 0 0 35%;
}
.css3-rating-stars,
.css3-rating-stars label::before{
display: inline-block;
}
.css3-rating-stars label:hover,
.css3-rating-stars label:hover ~ label{
color: #06befb;
}
.css3-rating-stars *{
margin: 0;
padding: 0;
}
.css3-rating-stars input{
display: none;
}
.css3-rating-stars{
unicode-bidi: bidi-override;
direction: rtl;
}
.css3-rating-stars label{
color: #ccc;
}
.css3-rating-stars label::before{
content: "\2605";
width: 48px;
line-height: 18px;
text-align: center;
font-size: 48px;
cursor: pointer;
}
.css3-rating-stars input:checked ~ label{
color: #f5b301;
}
.css3-rating-disabled{
opacity: .50;
-webkit-pointer-events: none;
-moz-pointer-events: none;
pointer-events: none;
}
HTML
<div class="wrapper">
<!-- css3-rating-stars -->
<div class="css3-rating-stars">
<form>
<input type="radio" name="group-1" id="group-1-0" value="5" />
<label for="group-1-0"></label>
<input type="radio" name="group-1" id="group-1-1" value="4" />
<label for="group-1-1"></label>
<input type="radio" name="group-1" id="group-1-2" value="3" />
<label for="group-1-2"></label>
<input type="radio" name="group-1" id="group-1-3" value="2" />
<label for="group-1-3"></label>
<input type="radio" name="group-1" id="group-1-4" value="1" />
<label for="group-1-4"></label>
</form>
</div>
<!-- /css3-rating-stars -->
</div> |
<div class="wrapper">
<!-- css3-rating-stars -->
<div class="css3-rating-stars">
<form>
<input type="radio" name="group-1" id="group-1-0" value="5" />
<label for="group-1-0"></label>
<input type="radio" name="group-1" id="group-1-1" value="4" />
<label for="group-1-1"></label>
<input type="radio" name="group-1" id="group-1-2" value="3" />
<label for="group-1-2"></label>
<input type="radio" name="group-1" id="group-1-3" value="2" />
<label for="group-1-3"></label>
<input type="radio" name="group-1" id="group-1-4" value="1" />
<label for="group-1-4"></label>
</form>
</div>
<!-- /css3-rating-stars -->
</div>
Live Demo