Skip to content

Commit 10aba54

Browse files
hritik5102hritik5102
committed
Accessible Radio Buttons 🕹️
1 parent 5e8868f commit 10aba54

File tree

2 files changed

+198
-0
lines changed

2 files changed

+198
-0
lines changed

‎19-accessible-radio-buttons/index.html‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>CSS - Accessible Radio Buttons</title>
7+
<link rel="stylesheet" href="style.css" />
8+
</head>
9+
<body>
10+
<header><h1>Accessible Radio Button</h1></header>
11+
<fieldset>
12+
<legend>Choose a color</legend>
13+
<div class="container">
14+
<div class="radio">
15+
<label for="red">red</label>
16+
<input type="radio" name="color" id="red" />
17+
<div class="imaginary-circle"></div>
18+
<div class="outer-ring"></div>
19+
</div>
20+
<div class="radio">
21+
<label for="green">green</label>
22+
<input type="radio" name="color" id="green" />
23+
<div class="imaginary-circle"></div>
24+
<div class="outer-ring"></div>
25+
</div>
26+
<div class="radio">
27+
<label for="blue">blue</label>
28+
<input type="radio" name="color" id="blue" />
29+
<div class="imaginary-circle"></div>
30+
<div class="outer-ring"></div>
31+
</div>
32+
<div class="radio">
33+
<label for="orange">orange</label>
34+
<input type="radio" name="color" id="orange" />
35+
<div class="imaginary-circle"></div>
36+
<div class="outer-ring"></div>
37+
</div>
38+
<div class="radio">
39+
<label for="hotpink">hotpink</label>
40+
<input type="radio" name="color" id="hotpink" />
41+
<div class="imaginary-circle"></div>
42+
<div class="outer-ring"></div>
43+
</div>
44+
<div class="radio">
45+
<label for="purple">purple</label>
46+
<input type="radio" name="color" id="purple" />
47+
<div class="imaginary-circle"></div>
48+
<div class="outer-ring"></div>
49+
</div>
50+
<div class="radio">
51+
<label for="brown">brown</label>
52+
<input type="radio" name="color" id="brown" />
53+
<div class="imaginary-circle"></div>
54+
<div class="outer-ring"></div>
55+
</div>
56+
</div>
57+
</fieldset>
58+
59+
<script>
60+
const colorRadioButtons = document.querySelectorAll(
61+
".radio input[type='radio']"
62+
); // Select all color radio buttons
63+
64+
colorRadioButtons.forEach((radioButton) => {
65+
const imaginaryCircle = radioButton.nextElementSibling; // Get imaginary circle
66+
const outerRing = imaginaryCircle.nextElementSibling; // Get outer ring circle
67+
68+
radioButton.addEventListener("change", () => {
69+
if (radioButton.checked) {
70+
colorRadioButtons.forEach((radioButton) => {
71+
// Reset all outline
72+
const imaginaryCircle = radioButton.nextElementSibling; // Get imaginary circle
73+
const outerRing = imaginaryCircle.nextElementSibling; // Get outer ring
74+
imaginaryCircle.style = "";
75+
outerRing.style = "";
76+
});
77+
78+
const selectedColor = radioButton.id; // Get selected color from id
79+
imaginaryCircle.style.outline = "2px solid white"; // Imaginary circle white outline
80+
outerRing.style.outline = `2px solid ${selectedColor}`; // Outer circle colored outline
81+
outerRing.style.outlineOffset = "2px"; // Offset colored outline
82+
}
83+
});
84+
});
85+
</script>
86+
</body>
87+
</html>

‎19-accessible-radio-buttons/style.css‎

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&display=swap");
2+
3+
*,
4+
::before,
5+
::after {
6+
margin: 0;
7+
padding: 0;
8+
box-sizing: border-box;
9+
font-family: "Lora", serif;
10+
}
11+
12+
body {
13+
display: flex;
14+
justify-content: center;
15+
min-height: 60vh;
16+
align-items: center;
17+
flex-direction: column;
18+
background-color: hsl(225deg 25% 92% / 1);
19+
}
20+
21+
header {
22+
color: purple;
23+
}
24+
25+
fieldset {
26+
margin-top: 20px;
27+
border: 0;
28+
width: 500px;
29+
display: flex;
30+
}
31+
32+
legend {
33+
font-size: 20px;
34+
font-weight: 600;
35+
}
36+
37+
.container {
38+
display: flex;
39+
gap: 20px;
40+
}
41+
42+
.radio {
43+
margin-top: 20px;
44+
position: relative;
45+
}
46+
47+
label {
48+
display: block;
49+
width: 1px;
50+
height: 1px;
51+
overflow: hidden;
52+
}
53+
54+
input[type="radio"] {
55+
position: relative;
56+
z-index: 3;
57+
width: 20px;
58+
height: 20px;
59+
opacity: 0;
60+
cursor: pointer;
61+
}
62+
63+
.imaginary-circle {
64+
width: 20px;
65+
height: 20px;
66+
border-radius: 50%;
67+
position: absolute;
68+
top: 1px;
69+
z-index: 2;
70+
}
71+
72+
input[id="red"] + .imaginary-circle {
73+
background-color: red;
74+
}
75+
76+
input[id="green"] + .imaginary-circle {
77+
background-color: green;
78+
}
79+
80+
input[id="blue"] + .imaginary-circle {
81+
background-color: blue;
82+
}
83+
84+
input[id="orange"] + .imaginary-circle {
85+
background-color: orange;
86+
}
87+
88+
input[id="hotpink"] + .imaginary-circle {
89+
background-color: hotpink;
90+
}
91+
92+
input[id="purple"] + .imaginary-circle {
93+
background-color: purple;
94+
}
95+
96+
input[id="brown"] + .imaginary-circle {
97+
background-color: brown;
98+
}
99+
100+
input[type="radio"]:checked {
101+
box-shadow: 0 0 0 3px black;
102+
}
103+
104+
.outer-ring {
105+
position: absolute;
106+
top: 1px;
107+
width: 20px;
108+
height: 20px;
109+
border-radius: 50%;
110+
z-index: 0;
111+
}

0 commit comments

Comments
 (0)