CSS Star Rating

Code Snippet

HTML

<div class="star">
    <div class="avg" style="width: 54%;">Current Rating: 2.7/5 star</div>
    <a class="s1" href="/movieid1/1">1 star</a>
    <a class="s2" href="/movieid1/2">2 star</a>
    <a class="s3" href="/movieid1/3">3 star</a>
    <a class="s4" href="/movieid1/4">4 star</a>
    <a class="s5" href="/movieid1/5">5 star</a>
</div>
    

CSS

    /* Star Rating */
    .star {
        position: relative;
        width: 125px;
        height: 25px;
        /*default star color*/
        background: gray;
    }
    .avg {
        height: 100%;
        /*average star color*/
        background: red;
        text-indent: -2000px;
    }
    div.star:hover .avg {
        display: none;
        width: 100%;
    }
    .star a {
        display: inline-block;
        *display: inline; /* ie hack */
        width: 20%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        background: url(star.png) no-repeat 100% 50%;
        _background-image: url(star.gif); /* gif image for ie6*/
        text-indent: -2000px;
        overflow: hidden;
        z-index: 5;
        outline: none;
    }
    .star a:hover,
    .star a:focus {
        /*hover star color*/
        background-color: green;
    }
    .star .s2 {
        width: 40%;
        z-index: 4;
    }
    .star .s3 {
        width: 60%;
        z-index: 3;
    }
    .star .s4 {
        width: 80%;
        z-index: 2;
    }
    .star .s5 {
        width: 100%;
        z-index: 1;
    }
    

Resources

Transparent star with white background

PNG:

GIF (IE6):

Notes

• Accessible (tabbing using keyboard and accesibility readers)
• Lightweight
• Supported browsers: Internet explorer, Firefox, Safari, Opera, and Chrome
• Background color is used to change the color of the star (see CSS)
• Use unordered list to make it more semantic, but not necessory