Pure CSS rating widget

by cmoreira

HTML

<div class="tt_rating">
    <input type="radio" name="_aditional_info_rating" id="_aditional_info_rating_5" value="5" /><label for="_aditional_info_rating_5" title="5 Stars">5 stars</label>
    <input type="radio" name="_aditional_info_rating" id="_aditional_info_rating_4" value="4" /><label for="_aditional_info_rating_4" title="4 Stars">4 stars</label>
    <input type="radio" name="_aditional_info_rating" id="_aditional_info_rating_3" value="3" /><label for="_aditional_info_rating_3" title="3 Stars">3 stars</label>
    <input type="radio" name="_aditional_info_rating" id="_aditional_info_rating_2" value="2" /><label for="_aditional_info_rating_2" title="2 Stars">2 stars</label>
    <input type="radio" name="_aditional_info_rating" id="_aditional_info_rating_1" value="1" /><label for="_aditional_info_rating_1" title="1 Star">1 star</label>
</div>

CSS

.tt_rating {
    float:left;
}

/* :not(:checked) is a filter, so that browsers that don’t support :checked don’t 
   follow these rules. Every browser that supports :checked also supports :not(), so
   it doesn’t make the test unnecessarily selective */
.tt_rating:not(:checked) > input {
    position:absolute;
    top:-9999px;
    clip:rect(0,0,0,0);
}

.tt_rating:not(:checked) > label {
    float:right;
    width:1em;
    padding:0 .1em;
    overflow:hidden;
    white-space:nowrap;
    cursor:pointer;
    font-size:200%;
    line-height:1.2;
    color:#ddd;
    
}

.tt_rating:not(:checked) > label:before {
    content: '★ ';
}

.tt_rating > input:checked ~ label {
    color: #f70;
   
}

.tt_rating:not(:checked) > label:hover,
.tt_rating:not(:checked) > label:hover ~ label {
    color: gold;
   
}

.tt_rating > input:checked + label:hover,
.tt_rating > input:checked + label:hover ~ label,
.tt_rating > input:checked ~ label:hover,
.tt_rating > input:checked ~ label:hover ~ label,
.tt_rating > label:hover ~ input:checked ~ label {
    color: #ea0;
    }

.tt_rating > label:active {
    position:relative;
    top:2px;
    left:2px;
}