Fontawesome has a great star rating css extension, which looks really awesome.
However clicking on any of the span elements wouldn\'t really do anything. I don\'t
One more interesting method. Pure CSS, keeps selected value, uses radio-buttons (cool!) and FA fonts
See demo
Taken from this post
HTML
CSS
.star-rating{
font-size: 0;
}
.star-rating__wrap{
display: inline-block;
font-size: 1rem;
}
.star-rating__wrap:after{
content: "";
display: table;
clear: both;
}
.star-rating__ico{
float: right;
padding-left: 2px;
cursor: pointer;
color: #FFB300;
}
.star-rating__ico:last-child{
padding-left: 0;
}
.star-rating__input{
display: none;
}
.star-rating__ico:hover:before,
.star-rating__ico:hover ~ .star-rating__ico:before,
.star-rating__input:checked ~ .star-rating__ico:before
{
content: "\f005";
}