Simple 5-Star Rating System in Plain HTML & CSS

Plain HTML Star Rating System

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

But how about giving a user simple way in form of start rating system? It is a good idea and also more user will do rate your product becuase it take very less time.

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

But ofcoure 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 dyanmaci website.

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

How to Create 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 Icons

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

Iam going to add 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">

The CSS Styles

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!

Code ExamplesYou May Also Like