Member-only story

Create a Star Rating Widget with CSS in 9 Steps

Nevin Katz
CodeX
Published in
9 min readApr 22, 2021
Photo by Sarah Vombrack on Unsplash

Star rating tools are seen on all kinds of apps and websites these days. Who knows — at one point you may be asked to build one as a quick way to collect user feedback.

Below is one way of achieving the star rating effect using pure CSS. You can glance at the finished product below.

Along the way, you’ll learn to use pseudoselectors, the “subsequent siblings” combinator (~), a few flexbox layout techniques, and a CSS transition.

While this code is Javascript-free, you will ultimately want to use some programming to parse, send, and store the value that the user selects. But for now, let’s dive into the HTML and CSS to see how to build the widget itself.

Step 1: Create one star in the “off” state

First, let’s make just one star with a hollow appearance that serves as our “off” state.

The overall container is a div container with the class star-rating.

<div class="star-rating"></div>

Create an account to read the full story.

The author made this story available to Medium members only.
If you’re new to Medium, create a new account to read this story on us.

Or, continue in mobile web

Already have an account? Sign in

CodeX
CodeX

Published in CodeX

Everything connected with Tech & Code. Follow to join our 1M+ monthly readers

Nevin Katz
Nevin Katz

Written by Nevin Katz

Developer at EDC. I write about web development and biology. Subscribe at https://buttondown.email/nevkatz for article roundups.

Responses (2)

What are your thoughts?

Hi Nevin, I have been struggling with getting the selected star rating? I'd like to get the value and append it to a formSubmission Object

Question:
The current form of this widget always has the first star filled in. I set all my inputs to "checked="false" and this persists. Is there a way for the star rating system to start with all empty stars?