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