How to create rating system using only css

Question

How to create rating system using only css. I don't want to use javascript/jquery or anything else. I don't want to use image/image sprites also. I need it only in hover(mouse over) not in click and in pure css. here is the sample image I want.

Answer 1

HTML

<article>
<div class="star-rating">

    <input class="rb0" id="Ans_1" name="numericRating" type="radio" value="0" checked="checked" />                       
    <input class="rb1" id="Ans_2" name="numericRating" type="radio" value="1" />
    <input class="rb2" id="Ans_3" name="numericRating" type="radio" value="2" />
    <input class="rb3" id="Ans_4" name="numericRating" type="radio" value="3" />    
    <input class="rb4" id="Ans_5" name="numericRating" type="radio" value="4" />    
    <input class="rb5" id="Ans_6" name="numericRating" type="radio" value="5" />    
    <input class="rb6" id="Ans_7" name="numericRating" type="radio" value="6" />
    <input class="rb7" id="Ans_8" name="numericRating" type="radio" value="7" />    
    <input class="rb8" id="Ans_9" name="numericRating" type="radio" value="8" />
    <input class="rb9" id="Ans_10" name="numericRating" type="radio" value="9" />
    <input class="rb10" id="Ans_11" name="numericRating" type="radio" value="10" />

    <label for="Ans_1" class="star rb0l" onclick=""></label>
    <label for="Ans_2" class="star rb1l" onclick=""></label>
    <label for="Ans_3" class="star rb2l" onclick=""></label>
    <label for="Ans_4" class="star rb3l" onclick=""></label>
    <label for="Ans_5" class="star rb4l" onclick=""></label>
    <label for="Ans_6" class="star rb5l" onclick=""></label>
    <label for="Ans_7" class="star rb6l" onclick=""></label>
    <label for="Ans_8" class="star rb7l" onclick=""></label>
    <label for="Ans_9" class="star rb8l" onclick=""></label>
    <label for="Ans_10" class="star rb9l" onclick=""></label>
    <label for="Ans_11" class="star rb10l last" onclick=""></label>

    <label for="Ans_1" class="rb" onclick="">0</label>
    <label for="Ans_2" class="rb" onclick="">1</label>
    <label for="Ans_3" class="rb" onclick="">2</label>
    <label for="Ans_4" class="rb" onclick="">3</label>
    <label for="Ans_5" class="rb" onclick="">4</label>
    <label for="Ans_6" class="rb" onclick="">5</label>
    <label for="Ans_7" class="rb" onclick="">6</label>
    <label for="Ans_8" class="rb" onclick="">7</label>
    <label for="Ans_9" class="rb" onclick="">8</label>
    <label for="Ans_10" class="rb" onclick="">9</label>
    <label for="Ans_11" class="rb" onclick="">10</label>

    <div class="rating"></div>
    <div class="rating-bg"></div> 
</div> <!-- star-rating -->
</article>

CSS

article {
    padding-left: 50px; /* arbitrary, to expose the "zero stars" area half a star to the left of the first star.*/
}

.star-rating {
    margin: 0 auto;
    display:inline-block;
}
/* radio button stars */

/* you can easily stuff the generation of these repetitive chunks of CSS into a server-side language like ASP */
.rb0:checked ~ .rating,
label.rb0l:hover ~ .rating
{
    width: 0px; /* no stars */
} 

.rb1:checked ~ .rating,
label.rb1l:hover ~ .rating
{
    width: 16px; /* half a star */
} 

.rb2:checked ~ .rating,
label.rb2l:hover ~ .rating
{
    width: 32px; /* a star */
} 

.rb3:checked ~ .rating,
label.rb3l:hover ~ .rating
{
    width: 48px; /* 1.5 stars */
}

.rb4:checked ~ .rating,
label.rb4l:hover ~ .rating
{
    width: 64px; /* 2 stars */
}
.rb5:checked ~ .rating,
label.rb5l:hover ~ .rating
{
    width: 80px;
}
.rb6:checked ~ .rating,
label.rb6l:hover ~ .rating
{
    width: 96px;
}
.rb7:checked ~ .rating,
label.rb7l:hover ~ .rating
{
    width: 112px;
}
.rb8:checked ~ .rating,
label.rb8l:hover ~ .rating
{
    width: 128px;
}
.rb9:checked ~ .rating,
label.rb9l:hover ~ .rating
{
    width: 144px;
}
.rb10:checked ~ .rating,
label.rb10l:hover ~ .rating
{
    width: 160px; /* 5 stars */
}

.star-rating label.star {
    width: 16px; /* half star */
    left: -16px; /* half star */
    padding: 0;
    height: 40px; /* whole star + 2x padding (4px each for top and bottom) */ 
    position: relative;
    z-index: 3;
    float: left;
}

.star-rating label.star.last {
    width: 32px;
}

/* hide inputs (RBs and their labels) */
.star-rating input[type=radio],
.star-rating label.rb
{
    display: none;
}

/* using icons found at http://www.easyicon.cn/language.en/icondetail/523835/ */
.rating {
    background: url(http://cdn-img.easyicon.cn/png/5238/523834.gif) repeat-x top left;
    position: relative;
    z-index: 2;
    top: 4px; /* 1x padding */
    height: 32px; /* whole star */
    width:0px;
}

.rating-bg {
    background: url(http://cdn-img.easyicon.cn/png/5238/523835.gif) repeat-x top left;
    position: relative;
    z-index: 1;
    top: -28px; /* 1 whole star - 1x padding */
    height: 32px; /* whole star */
    width: 160px;
}

/* IE8 fallback to radio buttons */
.ie8 .star-rating input,
.ie8 .star-rating label.rb
 {
    display: inline-block;
}

.ie8 .rating,
.ie8 .rating-bg,
.ie8 .star-rating label.star {
    display: none;
}

DEMO

Answer 2

html code...

<div class="rate">
            <div class="rate-item">☆</div>
            <div class="rate-item">☆</div>
            <div class="rate-item">☆</div>
        </div> 

css code...

  .rate{
        color:black;
        cursor:pointer;
    }
    .rate:hover{
        color:red;
    }
    .rate-item{
        float:left;
        cursor:pointer;
        margin:0px 15px 0px 15px;
    }
    .rate-item:hover ~ .rate-item {
        color: black;
    }

You can follow this example

http://jsfiddle.net/tanvir0604/JqKjL/1/

You can use fontawsome for better performance or just change the background image property besides the color property of my code.