PROWAREtech
CSS: Toggle Buttons
Use checkbox and radio controls to create toggle buttons just like on the Apple iPhone.
Create animated iPhone/smartphone toggle button checkboxes or radio buttons. To create custom checkboxes/radio buttons, follow this link.
Note: this code is not compatible with Internet Explorer 11, but the following code is.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>iPhone Radio/Checkboxes</title>
<style>
body {
background-color: white;
color: black;
}
input[type="checkbox"],
input[type="radio"] {
position: relative;
width: 52px;
height: 30px;
border-radius: 14px;
outline: none;
border: none;
-webkit-appearance: none;
background-color: lightgray;
transition: .1s;
}
input[type="checkbox"]::before,
input[type="radio"]::before {
content: "";
position: absolute;
width: 28px;
height: 28px;
border-radius: 14px;
top: 1px;
left: 1px;
background-color: white;
transition: .1s;
}
input[type="checkbox"]:checked,
input[type="radio"]:checked {
background-color: limegreen;
}
input[type="checkbox"]:checked::before,
input[type="radio"]:checked::before {
left: 23px;
}
@media (prefers-color-scheme: dark) {
body {
background-color: black;
color: white;
}
input[type="checkbox"],
input[type="radio"] {
background-color: dimgray;
}
}
</style>
</head>
<body>
<input type="checkbox" />
<br/>
<input type="checkbox" />
</body>
</html>
Another Version
The above example, however, is the cleanest solution. The below example is compatible with Internet Explorer 11.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Toggle Button Checkboxes</title>
<style>
body {
background-color: #e8e8e8;
color: #333;
}
main {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.togglebtn {
position: absolute;
margin: 0;
width: 52px;
height: 30px;
opacity: 0;
}
.togglebtn + label {
position: relative;
box-sizing: border-box;
display: inline-block;
border: 1px solid #ccc;
height: 28px;
width: 52px;
background-color: #e8e8e8;
border-radius: 14px;
}
.togglebtn + label > b {
position: absolute;
display: inline-block;
height: 100%;
vertical-align: top;
transition: margin-left .1s;
background-color: #fbfbfb;
width: 28px;
border-radius: 50%;
box-shadow: 0 3px 3px rgba(0,0,0,0.25);
margin-left: 0;
left: 0;
}
.togglebtn:checked + label {
background-color: limegreen;
}
.togglebtn:checked + label > b {
margin-left: 22px;
}
@media (prefers-color-scheme: dark) {
body {
background-color: #333;
color: #f8f8f8;
}
.togglebtn + label {
border-color: #555;
background-color: #555;
}
}
</style>
</head>
<body>
<main>
<form action="#" method="post">
<div>
<input type="checkbox" name="check1" id="check1" class="togglebtn" />
<label for="check1">
<b></b>
</label>
</div>
<div>
<input type="checkbox" name="check2" id="check2" class="togglebtn" /><label for="check2"><b></b></label>
</div>
<div>
<input type="checkbox" name="check3" id="check3" class="togglebtn" /><label for="check3"><b></b></label>
</div>
</form>
</main>
</body>
</html>
Coding Video
Another Version
Make all the checkboxes or radio buttons toggle buttons by specifying the HTML element instead of a CSS class as was done above.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Custom Checkboxes</title>
<style>
body {
font-family: sans-serif;
background-color: #eee;
color: #333;
padding: 25px;
}
input[type="checkbox"] {
position: absolute;
margin: 0;
width: 52px;
height: 30px;
opacity: 0;
}
input[type="checkbox"] + label {
box-sizing: border-box;
display: inline-block;
border: 1px solid transparent;
height: 28px;
width: 52px;
background-color: #b8b8b8;
border-radius: 14px;
}
input[type="checkbox"] + label > * {
display: inline-block;
height: 100%;
vertical-align: top;
transition: width .1s;
}
input[type="checkbox"] + label .toggle {
background-color: #fbfbfb;
width: 28px;
border-radius: 50%;
/*transform: scale(1.25);*/
/*box-shadow: 0 2px 5px rgba(0,0,0,0.25);*/
}
input[type="checkbox"]:checked + label {
background-color: limegreen;
}
input[type="checkbox"] + label .unchecked {
width: 22px;
}
input[type="checkbox"] + label .checked {
width: 0;
}
input[type="checkbox"]:checked + label .unchecked {
width: 0;
}
input[type="checkbox"]:checked + label .checked {
width: 22px;
}
</style>
</head>
<body>
<main>
<form action="#" method="post">
<input type="checkbox" name="check1" id="check1" />
<label for="check1">
<span class="checked"></span><span class="toggle"></span><span class="unchecked"></span>
</label>
<input type="checkbox" name="check2" id="check2" />
<label for="check2">
<span class="checked"></span><span class="toggle"></span><span class="unchecked"></span>
</label>
</form>
</main>
</body>
</html>
Coding Video
Comment
