Build a Star Rating with Just CSS: A Beginner's Guide

This tutorial demonstrates how to create a fully functional star rating component using only HTML and CSS. Surprisingly, you don't need any JavaScript to achieve this! We'll use a clever combination of radio buttons and CSS to build an interactive rating system that's perfect for forms, reviews, and other user feedback features.

Why CSS-Only?

Using only CSS for this component offers several benefits:

• Simplicity: Less code means easier maintenance and debugging. No JavaScript to worry about!

• Performance: CSS is generally faster than JavaScript, resulting in a snappier user experience.

• Accessibility: We'll use semantic HTML elements, making the component accessible to users with disabilities.

Setting Up the HTML Structure

First, we'll create the HTML for our star rating. We'll use radio buttons for the rating values and label elements to display the stars.

<div class="rating">
  <input type="radio" id="star5" name="rating" value="5" /><label for="star5" title="5 stars">&#9733;</label>
  <input type="radio" id="star4" name="rating" value="4" /><label for="star4" title="4 stars">&#9733;</label>
  <input type="radio" id="star3" name="rating" value="3" /><label for="star3" title="3 stars">&#9733;</label>
  <input type="radio" id="star2" name="rating" value="2" /><label for="star2" title="2 stars">&#9733;</label>
  <input type="radio" id="star1" name="rating" value="1" /><label for="star1" title="1 stars">&#9733;</label>
</div>

Here's a breakdown:

• Each input element is a radio button, allowing only one selection at a time. The name attribute is crucial; it ensures only one rating can be selected.

• The value attribute stores the numerical rating value.

• Each label element is linked to a radio button via the for attribute, which matches the corresponding radio button's id. This makes the entire star clickable.

• ★ is the HTML entity for a star character.

Styling with CSS

Now for the magic! We'll use the :checked pseudo-class and the sibling combinator (+) to style the stars based on the selected rating.

.rating {
  unicode-bidi: bidi-override; /* Ensures stars display correctly */
  direction: rtl; /* Reverses the order of the stars */
  font-size: 2em; /* Adjust star size */
}

.rating input {
  position: absolute; /* Hide the radio buttons */
  opacity: 0; /* Make them invisible */
}

.rating label {
  cursor: pointer; /* Make stars clickable */
}

.rating input:checked ~ label,
.rating input:checked + label {
  color: gold; /* Style selected stars */
}

.rating label:hover,
.rating label:hover ~ label {
  color: orange; /* Hover effect */
}

Let's break down the CSS:

• unicode-bidi and direction: These properties ensure the stars display correctly, even in right-to-left languages.

• Hiding the radio buttons: We hide the default radio buttons using position: absolute and opacity: 0.

• Styling the labels: We style the labels (stars) and add a hover effect.

• The :checked and sibling combinator magic: This is the core of the CSS-only functionality. When a radio button is checked, the :checked pseudo-class applies styles to its subsequent sibling labels using the ~ and + combinators. This effectively "fills" the stars up to the selected rating.

Practical Implications

This CSS-only star rating is ideal for various scenarios:

• User Reviews: Collect star ratings for products, services, or articles.

• Feedback Forms: Gather user satisfaction ratings.

• Tutorials and Quizzes: Create interactive rating systems for educational purposes.

Conclusion

This tutorial provides a simple yet effective way to build a star rating component without any JavaScript. This approach is lightweight, performant, and accessible, making it a great addition to your web development toolkit.

Inspired by an article from https://css-tricks.com/a-css-only-star-rating-component-and-more-part-1/