1.6K views
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
MIT License