Raiting stars with memoization witohut JavaScript

Rating stars which show overall progress, remember your selection and may be used in forms. All this without any piece of JavaScript.

by bumbu

HTML

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

CSS

.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;
}