Radio by aguerquin

1.rating > label {
2  margin-right: 4px;
3}
4
5.rating:not(:checked) > input {
6  display: none;
7}
8
9.rating:not(:checked) > label {
10  float: right;
11  cursor: pointer;
12  font-size: 30px;
13}
14
15.rating:not(:checked) > label > svg {
16  fill: #666;
17  transition: fill 0.3s ease;
18}
19
20.rating > input:checked ~ label > svg {
21  fill: #ffa723;
22}
23
24.rating:not(:checked) > label:hover ~ label > svg,
25.rating:not(:checked) > label:hover > svg {
26  fill: #ff9e0b;
27}
28
29#star1:hover ~ label > svg,
30#star1:hover > svg {
31  fill: #a23c3c !important;
32}
33
34#star2:hover ~ label > svg,
35#star2:hover > svg {
36  fill: #99542d !important;
37}
38
39#star3:hover ~ label > svg,
40#star3:hover > svg {
41  fill: #9f7e18 !important;
42}
43
44#star4:hover ~ label > svg,
45#star4:hover > svg {
46  fill: #22885e !important;
47}
48
49#star5:hover ~ label > svg,
50#star5:hover > svg {
51  fill: #7951ac !important;
52}
53
54#star1:checked ~ label > svg {
55  fill: #ef4444;
56}
57
58#star2:checked ~ label > svg {
59  fill: #e06c2b;
60}
61
62#star3:checked ~ label > svg {
63  fill: #eab308;
64}
65
66#star4:checked ~ label > svg {
67  fill: #19c37d;
68}
69
70#star5:checked ~ label > svg {
71  fill: #ab68ff;
72}
73