CSS Star Rating

Star rating using css, star rating using fonts, clickable star rating, user rating, user review rating.

by Daedalus

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<form id="user-rating-form">
<span class="user-rating">
<input type="radio" name="rating" value="5"><span class="star"></span>

    <input type="radio" name="rating" value="4"><span class="star"></span>

    <input type="radio" name="rating" value="3"><span class="star"></span>

    <input type="radio" name="rating" value="2"><span class="star"></span>

    <input type="radio" name="rating" value="1"><span class="star"></span>
</span>
</form>
        <p style="margin-left: 20px">You have selected <span id="selected-rating" class="selected-rating" >0</span> stars.</p>

CSS

.user-rating {
    direction: rtl;
    font-size: 20px;
    unicode-bidi: bidi-override;
    padding: 10px 30px;
    display: inline-block;
}
.user-rating input {
    opacity: 0;
    position: relative;
    left: -15px;
    z-index: 2;
    cursor: pointer;
}
.user-rating span.star:before {
    color: #777777;
    content:"";
    /*padding-right: 5px;*/
}
.user-rating span.star {
    display: inline-block;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    position: relative;
    z-index: 1;
}
.user-rating span {
    margin-left: -15px;
}
.user-rating span.star:before {
    color: #777777;
    content:"\f006";
    /*padding-right: 5px;*/
}
.user-rating input:hover + span.star:before, .user-rating input:hover + span.star ~ span.star:before, .user-rating input:checked + span.star:before, .user-rating input:checked + span.star ~ span.star:before {
    color: #ffd100;
    content:"\f005";
}

.selected-rating{
    color: #ffd100;
    font-weight: bold;
    font-size: 3em;
}

JavaScript

$('#user-rating-form').on('change','[name="rating"]',function(){
	$('#selected-rating').text($('[name="rating"]:checked').val());
});