​x
 
1
<!DOCTYPE html>
2
<title>My Example</title>
3
​
4
<style>
5
.radio-container { max-width: 400px; margin: 40px auto; padding: 30px; background-color: #f9f9f9; border-radius: 8px; font-family: sans-serif; }
6
.radio-container h3 { margin-top: 0; }
7
​
8
/* The container for each option */
9
.radio-option {
10
    display: block;
11
    position: relative;
12
    padding-left: 35px;
13
    margin-bottom: 12px;
14
    cursor: pointer;
15
    font-size: 1rem;
16
    -webkit-user-select: none;
17
    -moz-user-select: none;
18
    -ms-user-select: none;
19
    user-select: none;
20
}
21
​
22
/* Hide the default radio button but keep it accessible */
23
.radio-option input {
24
    position: absolute;
25
    opacity: 0;
26
    cursor: pointer;
27
    height: 0;
28
    width: 0;
29
}
30
​
31
/* The custom radio button */
32
.radiomark {
33
    position: absolute;
34
    top: 0;
35
    left: 0;
36
    height: 22px;
37
    width: 22px;
38
    background-color: #eee;
39
    border: 1px solid #ccc;
40
    border-radius: 50%;
41
    transition: all 0.2s;
42
}
43
​
44
/* On mouse-over, add a grey background */
45
.radio-option:hover .radiomark {
46
    background-color: #ccc;
47
}
48
/* When focused with keyboard, show a focus ring */
49
.radio-option input:focus ~ .radiomark {
50
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.5);
51
    border-color: #007bff;
52
}
53
/* When the radio button is checked, change the border color */
54
.radio-option input:checked ~ .radiomark {
55
    border-color: #007bff;
56
}
57
​
58
/* Create the indicator (the dot - hidden when not checked) */
59
.radiomark:after {
60
    content: "";
61
    position: absolute;
62
    display: none;
63
}
64
​
65
/* Show the indicator when checked */
66
.radio-option input:checked ~ .radiomark:after {
67
    display: block;
68
}
69
​
70
/* Style the indicator (the inner dot) */
71
.radio-option .radiomark:after {
72
    top: 5px;
73
    left: 5px;
74
    width: 12px;
75
    height: 12px;
76
    border-radius: 50%;
77
    background: #007bff;
78
}
79
</style>
80
​
81
<div class="radio-container">
82
    <h3>Shipping Method:</h3>
83
    <div class="radio-option">
84
        <input type="radio" id="shipping-standard" name="shipping" checked="checked">
85
        <label for="shipping-standard">Standard Shipping (5-7 days)</label>
86
        <span class="radiomark"></span>
87
    </div>
88
    
89
    <div class="radio-option">
90
        <input type="radio" id="shipping-express" name="shipping">
91
        <label for="shipping-express">Express Shipping (2-3 days)</label>
92
        <span class="radiomark"></span>
93
    </div>
94
    
95
    <div class="radio-option">
96
        <input type="radio" id="shipping-overnight" name="shipping">
97
        <label for="shipping-overnight">Overnight Shipping (1 day)</label>
98
        <span class="radiomark"></span>
99
    </div>
100
</div>