Simple five star rating with HTML and CSS

Five star rating

For making and implementing star rating.  we use many big Plugin. but understanding code and customizing that plugin is the big issue. we face horrible when we look into Code of that plugin.

Here I am showing you a simple way to implement star rating with the help of HTML and CSS.

Superman: What i need ?

  • Batman: Two Star from sky 😉

   

Superman: Now what else i need ?

  • Batman: Simple HTML code to show five Star in position.
<div class="star-wrapper">
 <span class="rating">
 <input id="rating5" type="radio" name="rating" value="5">
 <label for="rating5">5</label>
 <input id="rating4" type="radio" name="rating" value="4">
 <label for="rating4">4</label>
 <input id="rating3" type="radio" name="rating" value="3">
 <label for="rating3">3</label>
 <input id="rating2" type="radio" name="rating" value="2" checked>
 <label for="rating2">2</label>
 <input id="rating1" type="radio" name="rating" value="1">
 <label for="rating1">1</label>
 </span>
</div>

Superman: What else man ?

  • Batman: Style HTML in better manner. Use above stars in the better way to implement this star rating.  One thing keeps in mind don’t make it complicated as like always.
 .star-wrapper {
    padding: 20px;
    margin: 100px auto;
    width: 400px;
    min-height: 200px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0,0,0,.1);
    background-color: #fff;
}
.rating{
    overflow: hidden;
    vertical-align: bottom;
    display: inline-block;
    width: auto;
    height: 30px;
}
.rating > input{
    opacity: 0;
    margin-right: -100%;
}
.rating > label{
    position: relative;
    display: block;
    float: right;
    background: url('star-off-big.png');
    background-size: 30px 30px;
}
.rating > label:before{
    display: block;
    opacity: 0;
    content: '';
    width: 30px;
    height: 30px;
    background: url('star-on-big.png');
    background-size: 30px 30px;
    transition: opacity 0.2s linear;
}
.rating > label:hover:before,
.rating > label:hover ~ label:before,
.rating:not(:hover) > :checked ~ label:before{
    opacity: 1;
}

Superman: Now can you show me the result how it will look like.

Batman:  Check here…

Leave a Reply