Star Ratings Widget using CSS

This page shows how to implement a scalable star rating widget, as shown in the demonstration below. The widget scales to the surrounding text size with stars that never appear pixellated, regardless of the widget size or the visitor’s screen resolution. The widget is created purely using CSS, and does not require JavaScript.

Star ratings are one of those classic UX patterns that everyone has tinkered with at one time or another. I had an idea get the UX part of it done with very little code and no JavaScript.

The HTML Markup

The HTML for the star rating widget consists of a series of labelled radio buttons:

    
    5
    
    4
    
    3
    
    2
    
    1

Note that the radio buttons are ordered from highest rating to lowest; the order will be reversed by the styling.

The CSS Styling

First we style the containing element to control the layout:

The negation pseudo-class is used to hide the rule from older browsers which don’t support some of the techniques required. Visitors using these older browsers will see simple numbered radio buttons.

Next we style the radio buttons to hide them:

The opacity renders the radio buttons invisible, while the negative margin prevents them affecting the layout.

We then style the labels to create the stars in the off state:

The labels are displayed as blocks and floated to the right, reversing their order so that stars representing higher ratings are shown further to the right. By positioning the labels relatively, they appear on top of the invisible radio buttons, preventing the radio buttons from being clicked. The labels are given a background image of the star in its off state; an SVG image is used so that the stars never appear pixelated, regardless of the widget size or the visitor’s screen resolution. The background is sized so that the image stretches to the width of the label.

Next we style the before pseudo-element of the labels:

By using the before pseudo-element, the text within the labels is pushed down, and is then hidden due to the overflow property of the container. The pseudo-elements are given a width and height, which determines the size of the stars, and are given a background image of the star in its on state. The opacity is set so that the off state is visible by default, and the opacity is set to transition.

Finally, we add style rules to determine when the stars are shown in their on state:

The three selectors target the before pseudo-elements of the labels, changing their opacity to make each star’s on state visible. The first two selectors target a star that is being hovered over, and any following stars; these selectors let the widget show the new rating. The final selector targets the checked star, and any following stars, so long as the widget is not being hovered over; these selectors let the widget show the current rating.

There you have it! If you decide to create a website that do some sort of ratings, just simply use the code above to minimize the hussle :)

Credits to Stephen Morley