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
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
Eureka! 
How to reset the rating?
LikeLike
workaround – fro time being… waiting for any solid solution…
$(“.numRating”).html($(“.numRating”).html());
LikeLike