Simple 5-star Rating System with CSS and Html Radios

Category: CSS & CSS3 , Form | December 4, 2014
Author:jexordexan
Views Total:218,411 views
Official Page:Go to website
Last Update:December 4, 2014
License:MIT

Preview:

Simple 5-star Rating System with CSS and Html Radios

Description:

A pure CSS solution to create a simple five star rating widget using Html radio inputs and CSS3 transitions/transforms.

How to use it:

Include the required Font Awesome for star icons.

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">

Create the Html for a five star rating widget using Html radio buttons.

<div class="stars">
  <form action="">
    <input class="star star-5" id="star-5" type="radio" name="star"/>
    <label class="star star-5" for="star-5"></label>
    <input class="star star-4" id="star-4" type="radio" name="star"/>
    <label class="star star-4" for="star-4"></label>
    <input class="star star-3" id="star-3" type="radio" name="star"/>
    <label class="star star-3" for="star-3"></label>
    <input class="star star-2" id="star-2" type="radio" name="star"/>
    <label class="star star-2" for="star-2"></label>
    <input class="star star-1" id="star-1" type="radio" name="star"/>
    <label class="star star-1" for="star-1"></label>
  </form>
</div>

The required CSS/CSS3 styles for the rating widget.

div.stars {
  width: 270px;
  display: inline-block;
}
input.star { display: none; }
label.star {
  float: right;
  padding: 10px;
  font-size: 36px;
  color: #444;
  transition: all .2s;
}
input.star:checked ~ label.star:before {
  content: '\f005';
  color: #FD4;
  transition: all .25s;
}
input.star-5:checked ~ label.star:before {
  color: #FE7;
  text-shadow: 0 0 20px #952;
}
input.star-1:checked ~ label.star:before { color: #F62; }
label.star:hover { transform: rotate(-15deg) scale(1.3); }
label.star:before {
  content: '\f006';
  font-family: FontAwesome;
}

You Might Be Interested In:


20 thoughts on “Simple 5-star Rating System with CSS and Html Radios

    1. Asmita

      In the right corner of code u will get 2 link from there u can copy the code and use the code.

      Reply
  1. Swagata Bhattacharyya

    Thanks for sharing this. It works but when the selection seems to be working from the reverse side. e.g. if I select the fourth star it highlights the 4th and 5th in yellow instead of the 1st to 4th. How can I fix it?

    Reply
  2. nik1904

    How do you make this work for multiple stars in a table?

    Example I have a table, where a collum consist of this rating system. Using this code only works for the first rating system. How do I make it work for the rest of them?

    Reply
    1. Sharp

      Wanted to know the same thing.

      From the little that I understand, I don’t think it is possible with this implementation as it meddles with CSS styling, so any changes would influence everything rather than the one thing.

      A shame, since this works amazing, otherwise.

      Reply
    2. Sharp

      Woops, after leaving my initial comment, I soon came to realize that there was in fact a way to do this.

      I used a slightly different variation of this rating system shown by another blog, but it’s almost identical, especially the CSS. Pretty much prepend the ID, Name and For tags with a unique identifier, such as the row ID for the data assigned to the rating.

      Still learning as I go. Hope this helps anyone that came across this like I did.

      Reply
  3. Rasmus Schultz

    This is the simplest, cleanest implementation of radio-based star rating I’ve seen. Thanks!

    For my own uses, I needed something a little less “flashy”, so I simplified it a bit and also removed the dependency on FontAwesome by using a unicode star:

    https://jsfiddle.net/mindplay/dsh53cnr/

    Reply

Leave a Reply