CSS – Number rating widget

I have a HTML form which has radio inputs range from 1 to 5:

  <input type="radio" name="num" value="1" checked>1
  <input type="radio" name="num" value="2">2
  <input type="radio" name="num" value="3">3
  <input type="radio" name="num" value="4">4
  <input type="radio" name="num" value="5">5


I want to convert it into a rating widget. I found a very good post with an example to convert radio inputs into a star rating widget.

Code by Stephen Morley – A star rating widget using CSS

But instead of rating by stars, i would like to create a number rating widget. So i modified the example a bit. First, create a image as follow.

Each number unit is a 24px x 24px square so the image is 120px in width and 72px in height.

Then create the index.html and stylesheet.css:

<!DOCTYPE html>
  <link rel="stylesheet" type="text/css" href="stylesheet.css">
  <div class="numRating">
          <input id="rating1" type="radio" name="rating" value="1">
          <label for="rating1"><span>1</span></label>
        <input id="rating2" type="radio" name="rating" value="2">
        <label for="rating2"><span>2</span></label>
      <input id="rating3" type="radio" name="rating" value="3" checked>
      <label for="rating3"><span>3</span></label>
    <input id="rating4" type="radio" name="rating" value="4">
    <label for="rating4"><span>4</span></label>
  <input id="rating5" type="radio" name="rating" value="5">
  <label for="rating5"><span>5</span></label>



.numRating {
  display        : inline-block;
  position       : relative;
  height         : 24px;
  background     : url('icon_number_widget.png') no-repeat 0 0;
  vertical-align : bottom;

.numRating div {
  float    : left;
  position : relative;
  height   : 24px;

.numRating input {
  position : relative;
  z-index  : 1;
  width    : 24px;
  height   : 24px;
  margin   : 0;
  padding  : 0;
  opacity  : 0;

.numRating label {
  position : absolute;
  top      : 0;
  left     : 0;
  width    : 100%;
  height   : 24px;

.numRating span {
  display : none;

.numRating       input:checked       + label,
.numRating:hover input:checked:hover + label {
  background : url('icon_number_widget.png') repeat-x 0 -24px;

.numRating:hover input:checked + label {
  background : transparent;

.numRating:hover input:hover + label {
  background : url('icon_number_widget.png') repeat-x 0 -48px;


Put all these 3 files together and try it!

Done =)

Reference: Code by Stephen Morley – A star rating widget using CSS


2 thoughts on “CSS – Number rating widget”

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.