The Lab

8. Jan 2012

CSS3 Star Rating

Here's a way to set up a star rating system using CSS3 only. This works in all modern browsers. Optimized for Webkit.

The markup

The secret for this to work properly is the way we order our form elements. The radio inputs should be ordered from high to low value, and the labels should be placed after each radio button. (This is for the ~ label selector to work properly!)

For the stars we use use the an ASCII symbol (Decimal ★ or Hex ★).

The styles

We start off moving the radio inputs by out of the viewport before we style the "unckecked" labels. Finally we style every label succeeding the checked radio input using the input[type="radio"]:checked ~ label selector.

Webkit

I love experimenting with all the new CSS properties, and Webkit has a lot of these! I've filled each star with a background gradient using -webkit-background-clip:text and some other goodness. Check the source!

Internet Explorer

IE8 and below has no support for the :checked pseudo selector. To fall back to plain radio buttons, we can alternatively filter out these using conditional comments.

Demo

I've put together a demonstration and commented the source:

Try it out!

Added: You might also want to check out Chris Coyier's solution at CSS Tricks!

Back to Grimsrud Interaktiv