HTML5, CSS3 & JS Experiments

            
            <h2>Without Default Selection</h2>
            
            <div class="acidjs-rating-stars">
                <form>
                    <input type="radio" name="group-1" id="group-1-0" value="5" /><label for="group-1-0"></label><!--
                    --><input type="radio" name="group-1" id="group-1-1" value="4" /><label for="group-1-1"></label><!--
                    --><input type="radio" name="group-1" id="group-1-2" value="3" /><label for="group-1-2"></label><!--
                    --><input type="radio" name="group-1" id="group-1-3" value="2" /><label for="group-1-3"></label><!--
                    --><input type="radio" name="group-1" id="group-1-4"  value="1" /><label for="group-1-4"></label>
                </form>
            </div>
            
            <h2>With Default Selection</h2>
            
            <div class="acidjs-rating-stars">
                <form>
                    <input type="radio" name="group-2" id="group-2-0" value="5" /><label for="group-2-0"></label><!--
                    --><input type="radio" name="group-2" id="group-2-1" value="4" /><label for="group-2-1"></label><!--
                    --><input type="radio" checked="checked" name="group-2" id="group-2-2" value="3" /><label for="group-2-2"></label><!--
                    --><input type="radio" name="group-2" id="group-2-3" value="2" /><label for="group-2-3"></label><!--
                    --><input type="radio" name="group-2" id="group-2-4"  value="1" /><label for="group-2-4"></label>
                </form>
            </div>
            
            <h2>Disabled</h2>
            
            <div class="acidjs-rating-stars acidjs-rating-disabled">
                <form>
                    <input disabled="disabled" type="radio" name="group-3" id="group-3-0" value="5" /><label for="group-3-0"></label><!--
                    --><input disabled="disabled" type="radio" checked="checked" name="group-3" id="group-3-1" value="4" /><label for="group-3-1"></label><!--
                    --><input disabled="disabled" type="radio" name="group-3" id="group-3-2" value="3" /><label for="group-3-2"></label><!--
                    --><input disabled="disabled" type="radio" name="group-3" id="group-3-3" value="2" /><label for="group-3-3"></label><!--
                    --><input disabled="disabled" type="radio" name="group-3" id="group-3-4"  value="1" /><label for="group-3-4"></label>
                </form>
            </div>
            
            <p> </p>
            <p>If you are looking for a feature-complete 
                rating system, you may want to check <a href="http://wemakesites.net/?pageid=details&component=rating" target="_blank">AcidJs.Rating</a>.</p>
            
        

/*
 * Selectable CSS3 Rating Stars by Martin Ivanov (@wemakesitesnet)
 * @version 1.0
 * @author Martin Ivanov
 * @url portfolio http://wemakesites.net/
 * @url twitter https://twitter.com/wemakesitesnet
 * @url blog http://acidmartin.wordpress.com/
 **/

/*
 * Do you like this solution? Please, donate:
 * https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=QFUHPWJB2JDBS
 * 
 * If you are looking for a feature-complete rating system http://acidjs.wemakesites.net/rating.html 
 *
 **/

.acidjs-rating-stars,
.acidjs-rating-stars label::before
{
    display: inline-block;
}

.acidjs-rating-stars label:hover,
.acidjs-rating-stars label:hover ~ label
{
    color: #189800;
}

.acidjs-rating-stars *
{
    margin: 0;
    padding: 0;
}

.acidjs-rating-stars input
{
    display: none;
}

.acidjs-rating-stars
{
    unicode-bidi: bidi-override;
    direction: rtl;
}

.acidjs-rating-stars label
{
    color: #ccc;
}

.acidjs-rating-stars label::before
{
    content: "\2605";
    width: 18px;
    line-height: 18px;
    text-align: center;
    font-size: 18px;
    cursor: pointer;
}

.acidjs-rating-stars input:checked ~ label
{
    color: #f5b301;
}

.acidjs-rating-disabled
{
    opacity: .50;
    
    -webkit-pointer-events: none;
    -moz-pointer-events: none;
    pointer-events: none;
}