Adding a star rating system to your website or app is a great way to gather user feedback and make your content more interactive. In this blog post, we’ll show you how to create a simple and elegant star rating system using only HTML and CSS. No complex JavaScript or external libraries needed! Let’s dive right in.
Step 1: Set Up the HTML Structure
To begin, create an HTML file and define the basic structure of your star rating system.In this HTML structure, we have created a container with five radio buttons, each associated with a label. These labels will act as our star icons. Here’s a simple example:
<div class="star-rating"> <input type="radio" id="star5" name="rating" value="5" aria-label="5 stars" /> <label for="star5" title="5 stars" aria-hidden="true"></label> <input type="radio" id="star4" name="rating" value="4" aria-label="4 stars" /> <label for="star4" title="4 stars" aria-hidden="true"></label> <input type="radio" id="star3" name="rating" value="3" aria-label="3 stars" /> <label for="star3" title="3 stars" aria-hidden="true"></label> <input type="radio" id="star2" name="rating" value="2" aria-label="2 stars" /> <label for="star2" title="2 stars" aria-hidden="true"></label> <input type="radio" id="star1" name="rating" value="1" aria-label="1 star" /> <label for="star1" title="1 star" aria-hidden="true"></label> </div>
Step 2: Style the Star Icons with CSS
Now, let’s add some CSS to style our star rating system. Create a separate “styles.css” file and link it to your HTML file.In this CSS code, we make use of flexbox to arrange the stars horizontally in reverse order. We hide the radio buttons with “display: none” and style the labels to resemble stars. When a radio button is checked, the corresponding label’s color changes to yellow, giving the appearance of a selected star.
* {
margin: 0;
padding: 0;
}
.star-rating {
display: inline-block;
font-size: 0; /* Remove white space between inline-block elements */
background-color: #333; /* Dark gray background color */
padding: 10px; /* Add some padding for spacing */
border-radius: 5px; /* Add rounded corners for style */
}
.star-rating input[type="radio"] {
display: none;
}
.star-rating label {
float: right;
font-size: 30px;
color: #ccc;
cursor: pointer;
}
.star-rating label::before {
content: "\2605"; /* Unicode character for a star */
}
.star-rating input[type="radio"]:checked ~ label {
color: #ffc700; /* Yellow color for selected stars */
}
.star-rating label:hover,
.star-rating label:hover ~ label {
color: #deb217; /* Yellow color on hover */
}
.star-rating input[type="radio"]:checked + label:hover,
.star-rating input[type="radio"]:checked + label:hover ~ label,
.star-rating input[type="radio"]:checked ~ label:hover,
.star-rating input[type="radio"]:checked ~ label:hover ~ label,
.star-rating label:hover ~ input[type="radio"]:checked ~ label {
color: #c59b08; /* Highlight color on selected star hover */
}Creating a Star Rating System Using Radio Buttons using HTML & CSS DEMO
You’ve successfully created a star rating system using radio buttons, HTML, and CSS. This simple yet effective method allows you to add user-friendly feedback options to your website or app without the need for complex JavaScript code.
