Skip to content

Commit f3f5e6b

Browse files
aayush105aayush105
authored
Merge pull request #1006 from pranavpanmand/add-custom-checkbox
Add Custom Checkbox Template (HTML & CSS Only)
2 parents 07b9e3a + 73d62ba commit f3f5e6b

File tree

3 files changed

+127
-1
lines changed

3 files changed

+127
-1
lines changed

‎Custom Checkbox/index.html‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>ON/OFF Switches</title>
8+
<link rel="stylesheet" href="style.css">
9+
</head>
10+
11+
<body>
12+
13+
<div class="container">
14+
15+
<div class="header">System Settings</div>
16+
17+
<div class="group">
18+
19+
<div class="item">Wi-Fi</div>
20+
<div class="item">Blutooth</div>
21+
<div class="item">Portable Hotspot</div>
22+
23+
</div>
24+
25+
<div class="box-group">
26+
27+
<input type="checkbox">
28+
<input class="box2" type="checkbox">
29+
<input class="box2" type="checkbox">
30+
31+
</div>
32+
33+
</div>
34+
35+
</body>
36+
37+
</html>

‎Custom Checkbox/style.css‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
body {
2+
margin: 0;
3+
padding: 0;
4+
background: #130f40;
5+
font-family: arial;
6+
user-select: none;
7+
}
8+
9+
.container {
10+
position: absolute;
11+
top: 50%;
12+
left: 50%;
13+
transform: translate(-50%, -50%);
14+
height: 200px;
15+
width: 260px;
16+
background: #ecf0f1;
17+
border-radius: 20px;
18+
}
19+
20+
.container .header {
21+
position: absolute;
22+
padding: 15px 30px;
23+
color: #2691d9;
24+
font-size: 20px;
25+
font-weight: 600;
26+
}
27+
28+
.container .group {
29+
padding: 45px 30px;
30+
}
31+
32+
.group .item {
33+
margin: 25px 0;
34+
font-weight: 600;
35+
}
36+
37+
.container .box-group {
38+
position: absolute;
39+
top: 65px;
40+
left: 200px;
41+
}
42+
43+
.box-group .box2 {
44+
margin-top: 18px;
45+
}
46+
47+
.container input[type="checkbox"] {
48+
position: relative;
49+
height: 18px;
50+
width: 36px;
51+
background: white;
52+
outline: none;
53+
cursor: pointer;
54+
border-radius: 20px;
55+
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
56+
appearance: none;
57+
transition: 0.5s;
58+
outline: none;
59+
-webkit-tap-highlight-color: transparent;
60+
}
61+
62+
input[type="checkbox"]::before {
63+
content: '';
64+
position: absolute;
65+
height: 18px;
66+
width: 18px;
67+
border-radius: 20px;
68+
top: 0;
69+
left: 0;
70+
transform: scale(0.85);
71+
background: linear-gradient(#fff, #f2f2f2, #e6e6e6, #d9d9d9);
72+
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
73+
transition: 0.5s;
74+
}
75+
76+
input:checked[type="checkbox"] {
77+
background: #387cfa;
78+
}
79+
80+
input:checked[type="checkbox"]::before {
81+
left: 18px;
82+
}

‎index.html‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -306,11 +306,18 @@ <h1>You Dont Need JavaScript</h1>
306306
<a href="./SolarSystem/index.html">Solar System</a>
307307
<a href="./Parallax_Effect/index.html">Parallax Portfolio</a>
308308
<a href="./Luffy Straw Hat/index.html">Luffy Straw Hat</a>
309+
<a href="./netflix-logo/index.html">Netflix Logo</a>
310+
311+
<a href="./Custom Checkbox/index.html">Custom Checkbox</a>
312+
313+
314+
315+
309316

310317
<a href="./Email Subscription box/index.html">Email Subscription box</a>
311318

312319

313-
<a href="./netflix-logo/index.html">Netflix Logo</a>
320+
314321
<a href="./Navigation Menu Bar Animation/index.html">Navigation Menu Bar Animation</a>
315322

316323
</td>

0 commit comments

Comments
 (0)