Simple 5-Star Rating System in Plain HTML & CSS

Today we have to build a 5-star rating system using the HTML and a bit of CSS. The code is simple and easy to implement, All you need to copy & Paste.

Getting feedback about your site or product is important to know how users like or dislike. And for this, We do add comment section, create polls and do a lot of other stuff!

But how about giving a user a simple way in the form of a star rating system? It is a good idea and also more users will do rate your product because it takes very little time.

But of course, to save the data, You need to code into JavaScript or PHP then integrate with Mysql.

The today solution I am going to share with you — Build with plain HTM/CSS to create star rating using radio buttons and when a user click on stars, They become bright in yellow color.

This method is simple and easy to implement. You can easily integrate with any kind of website and then code to save the data for you are working on a dynamic website.

The star rating is also possible to do with JavaScript but it’s better to go with CSS3 because it makes your webpage lightweight.

How to Create a Rating System in Plain HTML

First, we need to define a Div which class name is stars.

Next, We will add a form tag and then define the input type radio. You also notice that it also included the label which actually hidden from the front end but we will implement CSS to target it.

<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>

Adding Stars using Font Awesome Icons

To implement a star, we need to add a star icon. The start can be an image or a font-face. Font-face is much better and works well. It is also lightweight and easy to implement.

I’m going to add a star icon from the font-awesome library but you can add any other if you like.

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

CSS Styles for Star Rating

The last thing is CSS which is here. You can find a complete source in the download file. You can see the CSS is easy to understand.

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;
}

That’s it! I hope you would like this HTML based star rating system. If you have any question feel free to comment below.