Back
Input
1 2<div class="rating"> 3 <input type="radio" id="star5" name="rating" value="5" /> 4 <label for="star5"></label> 5 <input type="radio" id="star4" name="rating" value="4" /> 6 <label for="star4"></label> 7 <input type="radio" id="star3" name="rating" value="3" /> 8 <label for="star3"></label> 9 <input type="radio" id="star2" name="rating" value="2" />10 <label for="star2"></label>11 <input type="radio" id="star1" name="rating" value="1" />12 <label for="star1"></label>13</div>
1 2.rating { 3 display: inline-block; 4} 5 6.rating input { 7 display: none; 8} 9 10.rating label {11 float: right;12 cursor: pointer;13 transition: color 0.3s;14}15 16.rating label:before {17 content: "\2605";18 font-size: 30px;19}20 21.rating input:checked ~ label,22.rating label:hover,23.rating label:hover ~ label {24 color: #ffd700;25 transition: color 0.3s;26}
MIT License