<div class="stars"> <div class="rating" style="width:65%"></div> <input type="radio" name="rating" id="star5" value="5"> <label for="star5"></label> <input type="radio" name="rating" id="star4" value="4"> <label for="star4"></label> <input type="radio" name="rating" id="star3" value="3"> <label for="star3"></label> <input type="radio" name="rating" id="star2" value="2"> <label for="star2"></label> <input type="radio" name="rating" id="star1" value="1"> <label for="star1"></label> </div>
.stars{ width: 130px; height: 26px; background: url(http://sandbox.bumbu.ru/ui/external/stars.png) 0 0 repeat-x; position: relative; } .stars .rating{ height: 26px; background: url(http://sandbox.bumbu.ru/ui/external/stars.png) 0 -26px repeat-x; } .stars input{ display: none; } .stars label{ display: none; position: absolute; top: 0; left: 0; height: 26px; width: 130px; cursor: pointer; } .stars:hover label{ display: block; } .stars label:hover{ background: url(http://sandbox.bumbu.ru/ui/external/stars.png) 0 -52px repeat-x; } .stars label + input + label{width: 104px;} .stars label + input + label + input + label{width: 78px;} .stars label + input + label + input + label + input + label{width: 52px;} .stars label + input + label + input + label + input + label + input + label{width: 26px;} .stars input:checked + label{ display: block; background: url(http://sandbox.bumbu.ru/ui/external/stars.png) 0 -52px repeat-x; }