CSS – Number rating widget

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

<form>
  <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
</form>

 

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.
icon_number_widget.png
icon_number_widget
 

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:
index.html

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

 

stylesheet.css

.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

Advertisements

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 )

Google+ photo

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

Connecting to %s