codemediaweb.com

Code Media

hire me

Simple 5 Star Rating using only HTML & CSS

by
Simple 5 Star Rating using only HTML & CSS

In this article, you will learn how to create a 5 Star Rating using HTML and CSS. This (5-star rating HTML code) is a daily necessity and widely used thing. Five Star Rating is used to give feedback on a product or service.

Here I have shown how to create a beautiful star rating CSS system. There are five-star signs here. The marks are usually white. They will turn yellow when you move the mouse or click on them. A text can be found with it. I used the text differently for each star.

5-star rating javascript

Follow the complete tutorial below step by step to create this Simple 5 Star Rating design. I have created 5 radio buttons with the help of input. Then I converted the radios to star marks using CSS code. 

These will be in white when you click on them they will turn yellow. Below is a demo that will help you learn how CSS Star Ratings work.

See the Pen Untitled by Code Media (@codemediaweb) on CodePen.

You need to have an idea about HTML, CSS, and JavaScript to build it. First, you create an HTML and CSS file. The best news is that here’s how I got here.

Step 1: Basic structure of Star Rating

I have designed the area of ​​star rating using the following HTML and CSS. I have used width 500px and height 150px as area here. Since this area has no background color, it is not visible.

<div class=”center”>
   <div class=”stars”>
 
   </div>
</div>
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
  background: #04162f;
}
.center{
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.center .stars{
  height: 150px;
  width: 500px;
  text-align: center;
}
Basic structure of Star Rating

Step 2: Create stars with input

 Now I have created a radio button using input. There are five radio buttons for the five stars.

 <input type=”radio” id=”five” name=”rate” value=”5″>
   <label for=”five”></label>
 <input type=”radio” id=”four” name=”rate” value=”4″>
   <label for=”four”></label>
 <input type=”radio” id=”three” name=”rate” value=”3″>
   <label for=”three”></label>
 <input type=”radio” id=”two” name=”rate” value=”2″>
   <label for=”two”></label>
 <input type=”radio” id=”one” name=”rate” value=”1″>
   <label for=”one”></label>
Create stars with input

Now the buttons have been converted to star symbols. Added a star symbol to the content using the ‘: before’ tag.

.stars input{
  display: none;
}
.stars label{
  float: right;
  font-size: 100px;
  color: lightgrey;
  margin: 0 5px;
  text-shadow: 1px 1px #bbb;
}
.stars label:before{
  content: ‘★’;
}
Added a star symbol

 Here the background color of the star symbols has been added. Normally this mark is gray but the color will be yellow when it is clicked or hovered.

.stars input:checked ~ label{
  color: gold;
  text-shadow: 1px 1px #c60;
}
.stars:not(:checked) > label:hover,
.stars:not(:checked) > label:hover ~ label{
  color: gold;
}
.stars input:checked > label:hover,
.stars input:checked > label:hover ~ label{
  color: gold;
  text-shadow: 1px 1px goldenrod;
}
5 Star Rating using only HTML & CSS

Step 3: Add result text in 5 Star Rating

I have created a place to view the test results. The text can be found in this place.

<span class=”result”></span>
.stars .result:before{
  position: absolute;
  content: “”;
  width: 100%;
  left: 50%;
  transform: translateX(-47%);
  bottom: -30px;
  font-size: 30px;
  font-weight: 500;
  color: gold;
  font-family: ‘Poppins’, sans-serif;
  display: none;
}
.stars input:checked ~ .result:before{
  display: block;
}

Now I have added the test results. I have added five texts here separately for each input. I have added those texts with the help of input: checked. As a result, when you click on the star, you will see the text added to that star.

.stars #five:checked ~ .result:before{
  content: “I love it 😍”;
}
.stars #four:checked ~ .result:before{
  content: “I like it 😀”;
}
.stars #three:checked ~ .result:before{
  content: “It’s good 😐”;
}
.stars #two:checked ~ .result:before{
  content: “I don’t like it 😟”;
}
.stars #one:checked ~ .result:before{
  content: “I hate it 😡”;
}
5 Star Rating

 Hopefully from this tutorial, I have learned how I created 5 Star Rating using HTML and CSS. You must comment on how you like the design.

Leave a comment