fontawsome_star_rating

by DYO Hashimoto

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
<div class="star-rating">
    <input checked="checked" class="rb0" id="Ans_1" name="numericRating" type="radio" value="0" />
    <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 class="star rb0l" for="Ans_1" onclick=""></label>
    <label class="star rb1l" for="Ans_2" onclick=""></label>
    <label class="star rb2l" for="Ans_3" onclick=""></label>
    <label class="star rb3l" for="Ans_4" onclick=""></label>
    <label class="star rb4l" for="Ans_5" onclick=""></label>
    <label class="star rb5l" for="Ans_6" onclick=""></label>
    <label class="star rb6l" for="Ans_7" onclick=""></label>
    <label class="star rb7l" for="Ans_8" onclick=""></label>
    <label class="star rb8l" for="Ans_9" onclick=""></label>
    <label class="star rb9l" for="Ans_10" onclick=""></label>
    <label class="star rb10l last" for="Ans_11" onclick=""></label>
    <label class="rb" for="Ans_1" onclick="">0</label>
    <label class="rb" for="Ans_2" onclick="">1</label>
    <label class="rb" for="Ans_3" onclick="">2</label>
    <label class="rb" for="Ans_4" onclick="">3</label>
    <label class="rb" for="Ans_5"...

CSS

.star-rating {
    padding-left: 50px;
    margin: 0 auto;
    display: inline-block;
}
.star-rating .rb0:checked ~ .rating:before, .star-rating label.rb0l:hover ~ .rating:before {
    width: 0px;
    /* no stars */
    content:'';
}
.star-rating .rb1:checked ~ .rating:before, .star-rating label.rb1l:hover ~ .rating:before {
    width: 30px;
    /* half a star */
    content:'\f123';
}
.star-rating .rb2:checked ~ .rating:before, .star-rating label.rb2l:hover ~ .rating:before {
    width: 30px;
    /* a star */
    content:'\f005';
}
.star-rating .rb3:checked ~ .rating:before, .star-rating label.rb3l:hover ~ .rating:before {
    width: 60px;
    /* 1.5 stars */
    content:'\f005\f123';
}
.star-rating .rb4:checked ~ .rating:before, .star-rating label.rb4l:hover ~ .rating:before {
    width: 60px;
    /* 2 stars */
    content:'\f005\f005';
}
.star-rating .rb5:checked ~ .rating:before, .star-rating label.rb5l:hover ~ .rating:before {
    width: 90px;
    content:'\f005\f005\f123';
}
.star-rating .rb6:checked ~ .rating:before, .star-rating label.rb6l:hover ~ .rating:before {
    width: 90px;
    content:'\f005\f005\f005';
}
.star-rating .rb7:checked ~ .rating:before, .star-rating label.rb7l:hover ~ .rating:before {
    width: 120px;
    content:'\f005\f005\f005\f123';
}
.star-rating .rb8:checked ~ .rating:before, .star-rating label.rb8l:hover ~ .rating:before {
    width: 120px;
    content:'\f005\f005\f005\f005';
}
.star-rating .rb9:checked ~ .rating:before, .star-rating label.rb9l:hover ~ .rating:before {
    width: 150px;
    content:'\f005\f005\f005\f005\f123';
}
.star-rating .rb10:checked ~ .rating:before, .star-rating label.rb10l:hover ~ .rating:before {
    width: 150px;
    /* 5 stars */
    content:'\f005\f005\f005\f005\f005';
}
.star-rating label.star {
    width: 15px;
    /* half star */
    left: -15px;
    /* half star */
    padding: 0;
    height: 40px;
    /* whole star + 2x padding (4px each for top and bottom) */
    position: relative;
   ...