207 views
CSS
1.rating:not(:checked) > input { 2 position: absolute; 3 appearance: none; 4} 5 6.rating:not(:checked) > label { 7 float: right; 8 cursor: pointer; 9 font-size: 50px; 10 color: #666; 11} 12 13.rating:not(:checked) > label:before { 14 content: '★'; 15} 16 17.rating > input:checked + label:hover, 18.rating > input:checked + label:hover ~ label, 19.rating > input:checked ~ label:hover, 20.rating > input:checked ~ label:hover ~ label, 21.rating > label:hover ~ input:checked ~ label { 22 color: #e58e09; 23} 24 25.rating:not(:checked) > label:hover, 26.rating:not(:checked) > label:hover ~ label { 27 color: #ff9e0b; 28} 29 30.rating > input:checked ~ label { 31 color: #ffa723; 32} 33 34 35 36
HTML
1<div class="rating"> 2 <input type="radio" id="star5" name="rate" value="5"> 3 <label for="star5" title="text"></label> 4 <input type="radio" id="star4" name="rate" value="4"> 5 <label for="star4" title="text"></label> 6 <input checked="" type="radio" id="star3" name="rate" value="3"> 7 <label for="star3" title="text"></label> 8 <input type="radio" id="star2" name="rate" value="2"> 9 <label for="star2" title="text"></label> 10 <input type="radio" id="star1" name="rate" value="1"> 11 <label for="star1" title="text"></label> 12</div>