CssHow-ToBeginner · 4 min read

How to Create Star Rating in CSS: Simple Guide with Example

To create a star rating in CSS, use input elements of type radio hidden from view and style label elements with star shapes using CSS. Use the :checked selector to highlight stars based on user selection, creating an interactive rating system without JavaScript.

📐

Syntax

A star rating uses hidden radio inputs for each star and label elements styled as stars. The for attribute on labels links to inputs. CSS :checked and ~ sibling selectors highlight stars up to the selected one.

input[type='radio']: hidden radio buttons for rating values.
label: clickable stars linked to inputs.
:checked: styles the selected star.
~ label: styles stars after the selected one.

html

<input type="radio" id="star5" name="rating" value="5" />
<label for="star5">★</label>
<input type="radio" id="star4" name="rating" value="4" />
<label for="star4">★</label>
<input type="radio" id="star3" name="rating" value="3" />
<label for="star3">★</label>
<input type="radio" id="star2" name="rating" value="2" />
<label for="star2">★</label>
<input type="radio" id="star1" name="rating" value="1" />
<label for="star1">★</label>

💻

Example

This example shows a 5-star rating system where stars highlight on hover and selection using only HTML and CSS. Users can click a star to select a rating.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Star Rating CSS Example</title>
<style>
  .star-rating {
    direction: rtl;
    font-size: 3rem;
    unicode-bidi: bidi-override;
    display: inline-flex;
  }
  .star-rating input {
    display: none;
  }
  .star-rating label {
    color: #ccc;
    cursor: pointer;
    transition: color 0.2s;
  }
  .star-rating label:hover,
  .star-rating label:hover ~ label {
    color: gold;
  }
  .star-rating input:checked ~ label {
    color: gold;
  }
</style>
</head>
<body>
  <form class="star-rating">
    <input type="radio" id="star5" name="rating" value="5" />
    <label for="star5" title="5 stars">★</label>
    <input type="radio" id="star4" name="rating" value="4" />
    <label for="star4" title="4 stars">★</label>
    <input type="radio" id="star3" name="rating" value="3" />
    <label for="star3" title="3 stars">★</label>
    <input type="radio" id="star2" name="rating" value="2" />
    <label for="star2" title="2 stars">★</label>
    <input type="radio" id="star1" name="rating" value="1" />
    <label for="star1" title="1 star">★</label>
  </form>
</body>
</html>

Output

Five gray stars in a row. Hovering over a star turns it and all stars to the right gold. Clicking a star keeps those stars gold as the selected rating.

⚠️

Common Pitfalls

Common mistakes include:

Not hiding the radio inputs, which shows ugly default circles.
Incorrect order of stars causing wrong highlight direction.
Missing for attributes on labels, making stars unclickable.
Not using direction: rtl or sibling selectors properly, so stars highlight incorrectly.

Always test that clicking a star updates the rating visually and that keyboard navigation works.

css

/* Wrong: inputs visible and stars highlight wrong way */
.star-rating input {
  display: inline;
}
.star-rating {
  direction: ltr;
}

/* Correct: hide inputs and use rtl for proper highlight */
.star-rating input {
  display: none;
}
.star-rating {
  direction: rtl;
}

📊

Quick Reference

Use hidden radio inputs for each star.
Style label elements with star characters or icons.
Use direction: rtl and unicode-bidi: bidi-override for correct star order.
Use :checked ~ label selector to highlight selected stars.
Use label:hover and sibling selectors for hover effect.

✅

Key Takeaways

Use hidden radio inputs and styled labels to create clickable stars.

Apply CSS sibling selectors and direction rtl for correct star highlighting.

Hide inputs with CSS to show only star shapes.

Use hover and checked states to provide interactive feedback.

Ensure labels have for attributes matching input ids for accessibility.