1
2    <div class="radio-group">
3      
4      <label class="radio-container">
5        <input type="radio" name="radioGroup" class="radio-input" checked>
6        <span class="radio-custom"></span>
7        Option 1
8      </label>
9  
10      <label class="radio-container">
11        <input type="radio" name="radioGroup" class="radio-input" >
12        <span class="radio-custom"></span>
13        Option 2
14      </label>
15  
16      <label class="radio-container">
17        <input type="radio" name="radioGroup" class="radio-input" >
18        <span class="radio-custom"></span>
19        Option 3
20      </label>
21    </div>
22    

1
2    .radio-group {
3      display: flex;
4      flex-direction: column;
5      gap: 10px;
6    }
7    
8    .radio-container {
9      display: flex;
10      align-items: center;
11      font-size: 16px;
12      color: #000000;
13      cursor: pointer;
14    }
15    
16    .radio-input {
17      position: absolute;
18      opacity: 0;
19      cursor: pointer;
20    }
21    
22    .radio-custom {
23      position: relative;
24      height: 20px;
25      width: 20px;
26      background-color: #ffffff;
27      border: 2px solid #3b82f6;
28      border-radius: 50%;
29      margin-right: 10px;
30      transition: all 0.2s;
31    }
32    
33    .radio-input:checked ~ .radio-custom {
34      background-color: #ffffff;
35      border-color: #3b82f6;
36    }
37    
38    .radio-custom:after {
39      content: "";
40      position: absolute;
41      display: none;
42      top: 50%;
43      left: 50%;
44      transform: translate(-50%, -50%);
45      width: 10px;
46      height: 10px;
47      border-radius: 50%;
48      background: #3b82f6;
49    }
50    
51    .radio-input:checked ~ .radio-custom:after {
52      display: block;
53    }
54    
55    .radio-input:focus ~ .radio-custom {
56      box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
57    }
58