5 Star Rating System Using HTML and CSS

5 Star Rating System Using HTML and CSS (Free Code)

5 Star Rating System Using HTML and CSS

If you want to create a five-star rating system using HTML and CSS then this tutorial will help you completely. Here I have shared with you the design of a star rating system using HTML and CSS. 5 Star Rating System You will see in different places. 

This type of system is widely used in the case of product or service websites. Where the user can give the rating of his choice about the quality of the product and service. This 5 Star Rating System will help other users to understand the quality of the product.

5 Star Rating HTML CSS

The design of the 5-star rating that I have shared with you here is absolutely simple. Only HTML and CSS are used for this. I added an emoji with the star rating. Emoji will vary according to the quality of your rating when you input the value of the rating.

Below is a demo that will help you know how this five-star rating works. Below you will find the complete source code related to this design.

See the Pen
Untitled by Foolish Developer (@foolishdevweb)
on CodePen.

As you can see, first a small area was created on the webpage. There are five stars here. The stars are created by the input function of HTML. 

Under normal circumstances, the stars have a white background, and a border is used around them. When you mouse over or click on those stars, the background of the stars will turn yellow.

How to Create 5 Star Rating Using HTML CSS

Here is an emoji that will change the shape of your face depending on the number of stars you input. You can use any other emoji in this place if you want. I’ve shared step-by-step how to use another emoji. 

If you only want the source code, you can use the download button below the article. However, I have shared the complete tutorial of this 5 Star Rating System for beginners. 

To build this five-star rating system you need to have a basic idea about HTML and CSS.

Step 1: Html code of star rating

Below I have given all the HTML codes that are required for this star rating. The first five radio buttons were created. These radio buttons are created using the input function of HTML. 

A place to show an emoji at the end of it all. As you can see, the emoji will vary depending on the star you input.

<div class=”rating”>
<!–Input box for making star –>
   <input type=”radio” name=”star”/><span class=”star”> </span>
   <input type=”radio” name=”star”/><span class=”star”> </span>
   <input type=”radio” name=”star”/><span class=”star”> </span>
   <input type=”radio” name=”star”/><span class=”star”> </span>
   <input type=”radio” name=”star”/><span class=”star”> </span>
<!–To view emoji–>
   <span class=”emo”> </span>
</div>

The webpage has been designed using the following CSS codes and more than this CSS 5 Star Rating System. Its width is 256px and the background color is white.

body {
background: #2c7dd9;
}
.rating {
width: 265px;
padding: 10px;
background: rgb(255, 255, 255);
margin: 200px auto 0;
position: relative;
direction: rtl;
}
Html code of star rating

Step 2: Design the input boxes

The input spaces are designed using the following CSS. Here font-size: 42px is used to increase the size of each input space. The background of these html 5 Star Ratings will be white and the border will be yellow.

.rating input {
position: absolute;
width: 35px;
height: 50px;
cursor: pointer;
transform: translateX(52px);
opacity: 0;
z-index: 5;
}
.rating input:nth-of-type(1) {
right: 50px;
}
.rating input:nth-of-type(2) {
right: 100px;
}
.rating input:nth-of-type(3) {
right: 150px;
}
.rating input:nth-of-type(4) {
right: 200px;
}
.rating input:nth-of-type(5) {
right: 250px;
}
.rating input:nth-of-type(6) {
right: 300px;
}
.rating .star {
display: inline-block;
font-family: FontAwesome;
font-size: 42px;
color: #FBB202;
cursor: pointer;
margin: 3px;
}
.rating .star:after {
content: ‘\f006’;
}
Design the input boxes

Step 3: Add emoji to 5 Star Rating

Now you need to add emoji to this project. I have used the following CSS codes to add emoji. Emoji font-size: 100px font size has been used.

.rating .emo {
position: absolute;
font-family: FontAwesome;
color: #fff;
font-size: 100px;
bottom: 150%;
left: 50%;
transform: translateX(-50%);
display: inline-block;
}
.rating .emo:after {
content: ‘\f119’;
}
Add emoji to 5 Star Rating

Step 4: Arrange to change the emoji with rating input

There are basically three types of emojis to be found here. You can use five different emojis for five input boxes if you want.

.rating input:nth-of-type(4):checked ~ .emo:after,
.rating input:nth-of-type(4):hover ~ .emo:after, 
.rating input:nth-of-type(3):checked ~ .emo:after, 
.rating input:nth-of-type(3):hover ~ .emo:after {
content: ‘\f11a’;
}
.rating input:nth-of-type(1):checked ~ .emo:after, 
.rating input:nth-of-type(1):hover ~ .emo:after, 
.rating input:nth-of-type(2):checked ~ .emo:after, 
.rating input:nth-of-type(2):hover ~ .emo:after {
content: ‘\f118’;
}
Star Rating System Using HTML CSS

Step 5: Add checked and hover effect in star rating

Changing the emoji with the input box as you saw above. However, the background color of the star ratings is not changing. 

Now I have arranged to change the background color of the star rating with the help of the following codes. This will cause the star you click on and all previous stars to turn yellow.

.rating input:checked ~ .star:after, 
.rating input:hover ~ .star:after {
content: ‘\f005’;
}
.rating .star:hover ~ .star:after, 
.rating .star:hover:after {
content: ‘\f005’;
}
checked and hover effect in star rating

I hope you have learned from the above tutorial how I created this 5 Star Rating System using HTML and CSS. If you have an idea about HTML CSS then you can easily create this star rating. 

If there is any problem then you can definitely let me know by commenting. If you want the source code needed to make this 5 Star Rating design, you can use the download button below.