How to create a star rating with HTML5

It is feasible to create an HTML5 star rating system without JavaScript. By using semantic radio input boxes and label tags, combined with CSS style, the specific method is to hide the radio button, use label to display star symbols, and use the :hover and :checked status to match the brother selector to make the current and previous star turn golden when the mouse is hovered or selected. At the same time, the direction: rtl ensures that the score is displayed correctly from right to left. This solution has good accessibility, supports screen readers, keyboard navigation, and can be further optimized through title, aria-label or fieldset. If a half-star rating is required, more complex CSS or JavaScript extensions are required, and finally realizes a lightweight, customizable and beautiful star rating component.

Creating a star rating system with HTML5 doesn't require complex JavaScript or external libraries—though you can enhance it later. With just HTML and a bit of CSS, you can build a clean, semantic, and interactive star rating that works well for user feedback, product reviews, or content ratings.

Here's how to build a basic star rating using HTML5 and CSS.

Use semantic HTML with hidden inputs and labels

HTML5 doesn't have a built-in star rating element, but you can use radio inputs and labels to create a clickable, accessible rating system.

 <div 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>
</div>

This structure uses radio buttons so only one star can be selected at a time. Each label displays a star symbol and is tied to its corresponding input via the for attribute.

Style the stars with CSS

Now make it looks like a real star rating. Hide the radio buttons and style the labels to show stars.

 .star-rating {
  direction: rtl;
  font-size: 32px;
  display: flex;
  gap: 2px;
}

.star-rating input {
  display: none;
}

.star-rating label {
  color: #ccc;
  cursor: pointer;
  user-select: none;
  transition: color 0.2s;
}

/* Hover and selection effect */
.star-rating label:hover,
.star-rating label:hover ~ label,
.star-rating input:checked ~ label {
  color: #ffcc00;
}

Key points:

• direction: rtl reverses the order so that hovering over a star fills all stars to the left.
• The ~ (general sibling selector) apply styles to stars that come after the hovered or selected one.
• Stars turn gold ( #ffcc00 ) on hover or when selected.

You can use actual star icons (like from Font Awesome) instead of Unicode ★ if you want better visuals.

Make it accessible

This method is already fairly accessible:

• Screen readers can interpret the radio group.
• Each label has a title attribute describing the rating.
• Keyboard navigation works naturally.

For even better accessibility, add aria-label or wrap the whole thing in a fieldset with a legend.

Optional: Add half-star ratings

For more precision, you can use two sets of radio inputs (odd and even) or use a pseudo-element trick with background gradients. But that requires more advanced CSS or JavaScript.

That's it. You now have a functional, accessible, and visually appealing star rating using only HTML5 and CSS. It's lightweight, easy to customize, and doesn't need JavaScript for basic functionality.

Basically just structure the inputs and labels right, hide the inputs, and use CSS to make the stars respond on hover and selection.

The above is the detailed content of How to create a star rating with HTML5. For more information, please follow other related articles on the PHP Chinese website!