Skip to content

Instantly share code, notes, and snippets.

@edwardkenfox

edwardkenfox/index.html

Created June 5, 2018 07:30
Show Gist options
  • Save edwardkenfox/e4be85fa0782fdaca6df44a71a067256 to your computer and use it in GitHub Desktop.
Save edwardkenfox/e4be85fa0782fdaca6df44a71a067256 to your computer and use it in GitHub Desktop.
Download ZIP
switch UI sample
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="switch-container">
<input type="checkbox" id="switch">
<label class="switch-area" for="switch">
<div class="off"><span class="off-span">OFF</span></div>
<div class="on"><span class="on-span">ON</span></div>
<div class="slider"></div>
</label>
</div>
<style>
input[type="checkbox"] {
display: none;
}
input[type="checkbox"]:not(:checked) + .switch-area {
background-color: #ddd;
}
input[type="checkbox"]:checked + .switch-area {
background-color: red;
}
.switch-area {
cursor: pointer;
display: flex;
height: 32px;
width: 90px;
border-radius: 2px;
position: relative;
}
.off {
transform: scale(1);
transition: 0.2s ease-in-out;
z-index: 20;
width: 45px;
visibility: hidden;
}
input[type="checkbox"]:not(:checked) + .switch-area > .off {
visibility: visible;
}
.on {
color: red;
transform: scale(1);
transition: 0.2s ease-in-out;
z-index: 10;
width: 45px;
/* visibility: hidden; */
}
input[type="checkbox"]:checked + .switch-area > .on {
visibility: visible;
}
.off-span {
position: absolute;
z-index: 5;
}
input[type="checkbox"]:not(:checked) + .switch-area .off-span {
visibility: hidden;
}
.on-span {
position: absolute;
z-index: 5;
}
input[type="checkbox"]:checked + .switch-area .on-span {
visibility: hidden;
}
.slider {
background-color: white;
width: 45px;
height: 30px;
/* border-radius: 16px; */
position: absolute;
left: 1px;
top: 1px;
transform: scale(1);
transition: 0.2s ease-in-out;
z-index: 10;
}
input[type="checkbox"]:checked + .switch-area > .slider {
left: 44px;
}
</style>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment