CSS Project: Crafting a Pure CSS Animated Custom Interactive ‘Star Rating’ Component

Written by

FixTechToday

in

In the digital age, user experience is king. Websites and applications live or die based on how easily and enjoyably users can interact with them. One of the most common and effective ways to gather user feedback is through star ratings. Think about it: how many times have you clicked on a star rating to rate a product, service, or piece of content? They’re everywhere, and for good reason. Star ratings provide a quick, visual, and intuitive way for users to express their opinions, and for businesses to gauge customer satisfaction. But what if you could create your own custom star rating component, perfectly tailored to your design and functionality needs, using only CSS? This project will guide you through the process, providing a hands-on learning experience that will solidify your understanding of CSS and its power.

Why Build a Custom Star Rating Component?

While numerous JavaScript libraries and frameworks offer pre-built star rating components, there are several compelling reasons to build one yourself using pure CSS:

  • Lightweight and Performant: CSS-only solutions are incredibly lightweight, leading to faster loading times and improved performance, especially on mobile devices.
  • Customization: You have complete control over the design and behavior, allowing you to seamlessly integrate the star rating into your existing website design.
  • Learning Opportunity: Building a star rating component from scratch is an excellent way to deepen your understanding of CSS selectors, pseudo-classes, and animation techniques.
  • No External Dependencies: Avoid the bloat of external libraries and dependencies.

Project Overview: What We’ll Build

In this project, we’ll create a fully functional, interactive star rating component using only HTML and CSS. Users will be able to hover over the stars to preview their rating, and clicking will select the rating. The component will be responsive, visually appealing, and easily customizable to fit your specific design requirements. We will cover:

  • Creating the basic HTML structure for the stars.
  • Styling the stars using CSS.
  • Implementing hover effects to change the appearance of the stars.
  • Adding click functionality to select a rating.
  • Making the component accessible and responsive.

Step-by-Step Guide: Building Your Star Rating Component

1. HTML Structure

Let’s start by setting up the HTML structure. We’ll use a `div` element to contain the entire star rating component and then use `input` elements of type `radio` and labels to represent each star. This approach provides semantic structure and allows us to easily handle user interaction with CSS.

<div class="star-rating">
  <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>
</div>

Here’s a breakdown of the HTML:

  • The `<div class=”star-rating”>` is the container for our component.
  • Each `<input type=”radio”>` represents a star. We use radio buttons because only one star can be selected at a time, just like radio buttons in a form.
  • Each `<input>` has a unique `id` (e.g., “star5”) and a `name` attribute (e.g., “rating”). The `name` attribute is crucial to group the radio buttons, ensuring that only one can be selected.
  • Each `<input>` also has a `value` attribute, which represents the numerical value of the star (1 to 5).
  • The `<label for=”starX”>` elements are associated with the input elements using the `for` attribute, linking them to their corresponding radio buttons by the `id`. This is important for accessibility: clicking on a star’s label will select the radio button.

2. Basic CSS Styling

Now, let’s add some basic CSS to style our stars. We’ll start with the container and the labels. We’ll use the `::before` pseudo-element on the labels to create the star shapes. Replace the contents of the HTML file with the code below:


.star-rating {
  display: inline-flex; /* Use inline-flex to allow horizontal layout and sizing */
  flex-direction: row-reverse; /* Reverse the order for easier styling */
  font-size: 2rem; /* Adjust the size of the stars */
}

.star-rating input {
  display: none; /* Hide the radio buttons */
}

.star-rating label {
  color: #ddd; /* Default star color */
  cursor: pointer; /* Change cursor to pointer on hover */
  transition: color 0.2s ease; /* Add a smooth transition */
}

.star-rating label::before {
  content: "2605"; /* Unicode character for a star */
  margin-right: 5px; /* Add some space between stars */
}

Here’s what each part of the CSS does:

  • `.star-rating`: Sets the container to `inline-flex` for horizontal layout, and `flex-direction: row-reverse` to simplify hover effects.
  • `.star-rating input`: Hides the radio buttons, as we’ll be using the labels for interaction.
  • `.star-rating label`: Styles the labels (the stars). Sets a default color, adds a pointer cursor, and adds a transition for hover effects.
  • `.star-rating label::before`: Uses the `::before` pseudo-element to insert the star character (Unicode character for a filled star). Adds some margin to separate the stars.

3. Adding Hover Effects

Next, we’ll implement the hover effects. When the user hovers over a star, all stars to the left should light up. This is where CSS selectors come into play. We’ll use the `:hover` pseudo-class and the adjacent sibling selector (`+`) and the general sibling selector (`~`) to achieve this.


.star-rating input:hover ~ label,
.star-rating input:hover + label {
  color: #ffc107; /* Star color on hover */
}

Let’s break down this CSS:

  • `.star-rating input:hover`: This targets the radio input when it’s being hovered over.
  • `~ label`: This is the general sibling selector. It selects all `label` elements that come after the hovered `input` element. These are the stars *to the left* of the hovered star.
  • `+ label`: This is the adjacent sibling selector. It selects the *immediately* following `label` element. This is the star that is being hovered over.
  • `color: #ffc107`: Sets the star color to a golden yellow on hover.

This combination ensures that when you hover over a star, that star and all stars to its left light up.

4. Implementing Click Functionality

The final step is to make the stars selectable. When the user clicks a star, that rating should be selected and remain highlighted. We’ll use the `:checked` pseudo-class to achieve this.


.star-rating input:checked ~ label, /* For all labels to the left */
.star-rating input:checked + label {
  color: #ffc107; /* Star color when checked */
}

Here’s how this works:

  • `.star-rating input:checked`: This targets the radio input when it’s checked (clicked).
  • `~ label`: This selects all `label` elements that come after the checked `input`.
  • `+ label`: This selects the immediately following `label` element.
  • `color: #ffc107`: Sets the star color to a golden yellow when checked.

With this, when a user clicks a star, it and all stars to its left will remain highlighted, indicating the selected rating.

5. Accessibility Considerations

Accessibility is crucial. Ensure your star rating component is usable by everyone, including people with disabilities. Here are a few key points:

  • Keyboard Navigation: The labels are associated with the radio inputs. Users can navigate through the stars using the Tab key, and select a rating using the Spacebar or Enter key.
  • Screen Reader Compatibility: Screen readers will announce the labels as clickable elements, and the selected rating will be announced as the radio button is checked.
  • Color Contrast: Ensure sufficient color contrast between the star color and the background to meet accessibility guidelines.
  • Semantic HTML: Using the correct HTML structure (radio buttons and labels) is fundamental for accessibility.

6. Customization and Styling

One of the main advantages of a CSS-only solution is the ease of customization. You can modify the appearance of the stars, the colors, and the spacing to perfectly match your website’s design. Here are some ideas:

  • Star Shape: Change the `content` property in `::before` to use different Unicode characters (e.g., a hollow star, a heart, etc.) or even use an image.
  • Colors: Modify the `color` properties to match your brand colors. You can also add hover and active state colors.
  • Size: Adjust the `font-size` property in the `.star-rating` class to change the size of the stars.
  • Spacing: Modify the `margin-right` property in the `label::before` rule to adjust the spacing between stars.
  • Animation: Add CSS animations to create more engaging hover effects (e.g., scaling the stars on hover).

Here’s an example of how to change the star shape and color:


.star-rating label::before {
  content: "2606"; /* Hollow star */
  margin-right: 5px;
}

.star-rating label {
  color: #ccc; /* Default color: light grey */
  transition: color 0.3s ease;
}

.star-rating input:hover ~ label,
.star-rating input:hover + label,
.star-rating input:checked ~ label,
.star-rating input:checked + label {
  color: #f0ad4e; /* Gold color */
}

7. Responsive Design

To make your star rating component responsive, use media queries. For example, you can reduce the star size on smaller screens:


@media (max-width: 768px) {
  .star-rating {
    font-size: 1.5rem; /* Smaller stars on smaller screens */
  }
}

This will adjust the `font-size` of the stars when the screen width is 768px or less. Adjust the breakpoint to suit your design.

Common Mistakes and How to Fix Them

Here are some common mistakes developers make when building CSS star rating components, and how to avoid them:

  • Incorrect HTML Structure: Using the wrong HTML structure (e.g., not using radio buttons) will make it difficult or impossible to implement the hover and click functionality correctly. Always use radio buttons with associated labels.
  • Incorrect CSS Selectors: Using incorrect CSS selectors (e.g., not understanding the difference between the adjacent sibling selector `+` and the general sibling selector `~`) can lead to unexpected behavior. Carefully review your selectors.
  • Forgetting the `name` Attribute: If you don’t include the `name` attribute in your radio buttons, you won’t be able to select only one star at a time. Make sure all your radio buttons have the same `name` attribute.
  • Ignoring Accessibility: Failing to consider accessibility can make your component unusable for some users. Always test your component with a screen reader and ensure proper keyboard navigation.
  • Overcomplicating the CSS: While you can add complex animations, start simple. Sometimes, less is more. Keep your CSS clean and easy to understand.

Complete Code Example

Here’s the complete HTML and CSS code for the star rating component:


<div class="star-rating">
  <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>
</div>


.star-rating {
  display: inline-flex;
  flex-direction: row-reverse;
  font-size: 2rem;
}

.star-rating input {
  display: none;
}

.star-rating label {
  color: #ddd;
  cursor: pointer;
  transition: color 0.2s ease;
}

.star-rating label::before {
  content: "2605";
  margin-right: 5px;
}

.star-rating input:hover ~ label,
.star-rating input:hover + label {
  color: #ffc107;
}

.star-rating input:checked ~ label,
.star-rating input:checked + label {
  color: #ffc107;
}

Key Takeaways

  • Use radio buttons and associated labels for semantic HTML.
  • Leverage CSS selectors like `:hover`, `:checked`, `+` and `~`.
  • Customize the appearance and behavior with CSS.
  • Prioritize accessibility.
  • Keep it lightweight and performant.

Optional: FAQ

Q: Can I use images instead of Unicode characters for the stars?

A: Yes, you can. Instead of using `content: “2605”;`, you can use `background-image` property on the `label::before` pseudo-element to display an image. Be sure to set the `background-size` and `background-repeat` properties accordingly.

Q: How can I submit the selected rating to a server?

A: The radio buttons are already set up to submit the rating value. You’ll need to wrap the star rating component within a `<form>` element and add a submit button. When the form is submitted, the selected radio button’s value will be included in the form data, which can then be sent to your server. Use server-side code (e.g., PHP, Python, Node.js) to process the submitted rating.

Q: How can I add an animation to the star rating component?

A: You can add CSS animations to the `label` elements. For example, you can use the `transform: scale()` property to make the stars grow slightly when hovered or selected. You can also use the `transition` property to control the animation duration and easing function.

Q: How can I change the number of stars?

A: You can easily adjust the number of stars by adding or removing input elements and corresponding labels in the HTML. Remember to update the CSS selectors if you change the number of stars significantly (e.g., if you switch to a 10-star rating).

Q: Is it possible to use this component with JavaScript?

A: While the core functionality can be achieved with CSS, you can definitely enhance it with JavaScript. For example, you could use JavaScript to dynamically update the rating based on data from a server, or to add more complex animations and effects. However, for the basic functionality of displaying and selecting a rating, CSS is sufficient.

Building a custom star rating component with pure CSS is a rewarding project that allows you to deepen your understanding of CSS principles and create a highly customizable and performant UI element. By mastering the techniques described in this guide, you’ll be well-equipped to integrate star ratings into your projects, enhancing user experience and providing valuable feedback mechanisms. The ability to craft such components from scratch also builds a strong foundation for tackling more complex UI challenges, empowering you to create truly unique and engaging web experiences. With careful planning, clean code, and a focus on accessibility, you can create a star rating component that is not only visually appealing, but also user-friendly and highly functional. Embrace the power of CSS, experiment with different styles, and enjoy the satisfaction of building something from the ground up.

More posts