Radio by Pradeepsaranbishnoi

1.container {
2  --s: 1em; /* control the size */
3  --g: 10px; /* the gap */
4  --c: #009688; /* the active color */
5
6  display: grid;
7  grid-auto-rows: 1fr;
8  gap: var(--g);
9  position: relative;
10}
11.container:before {
12  content: "";
13  position: absolute;
14  height: calc(var(--s) / 2);
15  left: calc(var(--s) / 4 + var(--_x, 0px));
16  top: calc(var(--s) / 4);
17  background: var(--c);
18  border-radius: 50%;
19  aspect-ratio: 1;
20  transition: 0.4s, left cubic-bezier(0.1, -2000, 0.7, -2000) 0.4s;
21}
22.container label {
23  display: inline-flex;
24  line-height: var(--s);
25  align-items: center;
26  gap: 10px;
27  cursor: pointer;
28}
29.container input {
30  height: var(--s);
31  aspect-ratio: 1;
32  border: calc(var(--s) / 8) solid var(--_c, #939393);
33  border-radius: 50%;
34  outline-offset: calc(var(--s) / 10);
35  padding: calc(var(--s) / 8);
36  -webkit-appearance: none;
37  -moz-appearance: none;
38  appearance: none;
39  cursor: pointer;
40  font-size: inherit;
41  margin: 0;
42  transition: 0.3s;
43}
44.container input:checked {
45  --_c: var(--c);
46}
47.container:not(:has(input:checked)):before {
48  --_i: -1;
49  opacity: 0;
50}
51.container:has(input:checked):before {
52  opacity: 1;
53  transform: translateY(calc(var(--_i) * (var(--s) + var(--g))));
54}
55.container:has(label:nth-child(1) input:checked):before {
56  --_i: 0;
57  --_x: 0.02px;
58}
59.container:has(label:nth-child(2) input:checked):before {
60  --_i: 1;
61  --_x: 0.04px;
62}
63.container:has(label:nth-child(3) input:checked):before {
64  --_i: 2;
65  --_x: 0.06px;
66}
67.container:has(label:nth-child(4) input:checked):before {
68  --_i: 3;
69  --_x: 0.08px;
70}
71.container:has(label:nth-child(5) input:checked):before {
72  --_i: 4;
73  --_x: 0.1px;
74}
75/* and so on ..*/
76
77.container input:disabled {
78  background: linear-gradient(#939393 0 0) 50%/100% 20% no-repeat content-box;
79  opacity: 0.5;
80  cursor: not-allowed;
81}
82@media print {
83  input[type="radio"] {
84    -webkit-appearance: auto;
85    -moz-appearance: auto;
86    appearance: auto;
87    background: none;
88  }
89}
90@supports not selector(:has(*)) {
91  .container:before {
92    display: none;
93  }
94  .container input:checked {
95    --_c: var(--c);
96    background: var(--c) content-box;
97  }
98}
99