Toggle switch.
A Pen by IpsumLorem16 on CodePen.
<!-- Delete content wrapper --> | |
<div class="content-wrapper"> | |
<div class="toggle-container"> | |
<label for="toggle-1" class="toggle-switch"> | |
Label | |
</label> | |
<button role="switch" type="button" aria-checked="false" id="toggle-1" class="toggle-switch"> | |
<span aria-hidden="true"></span> | |
<span class="knob"></span> | |
<span aria-hidden="true"></span> | |
</button> | |
</div> | |
</div> |
document.querySelectorAll(".toggle-switch[role='switch']").forEach(switchEl => { | |
switchEl.addEventListener("click", handleToggleClick, false); | |
//prevent focus on switch when clicking on it | |
switchEl.addEventListener("mousedown", event => { | |
event.preventDefault(); | |
}); | |
}); | |
function handleToggleClick(event) { | |
let switchEl = event.target; | |
//if not disabled toggle attribute | |
if (!switchEl.hasAttribute("aria-readonly")) { | |
let currState = switchEl.getAttribute("aria-checked"); | |
let newState = currState === "true" ? false : true; | |
switchEl.setAttribute("aria-checked", newState); | |
} | |
} | |
//prevent focus to switch, on clicking label | |
document.querySelectorAll("label.toggle-switch").forEach(labelEl => { | |
labelEl.addEventListener("click", event => { | |
event.preventDefault(); //prevent focus | |
event.target.control.click(); //activate switch | |
}); | |
}); |
// for codepen only, delete these | |
@import url("https://fonts.googleapis.com/css?family=Roboto&display=swap"); | |
body { | |
background-color: #191919; | |
display: flex; | |
justify-content: center; | |
} | |
.content-wrapper { | |
width: 533px; | |
max-width: 100%; | |
box-sizing: border-box; | |
padding: 20px; | |
border-radius: 4px; | |
background: #565656; | |
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); | |
} | |
// main content | |
.toggle-container { | |
display: flex; | |
align-items: center; | |
label { | |
margin-right: 4px; | |
font-family: Roboto, sans-serif; | |
color: #111111; | |
font-size: 16px; | |
font-weight: 600; | |
cursor: pointer; | |
user-select: none; | |
} | |
button[role="switch"] { | |
-webkit-tap-highlight-color: transparent; | |
position: relative; | |
margin-left: auto; | |
width: 50px; | |
height: 26px; | |
padding: 1px 6px; | |
background-color: #d8d9db; | |
outline: none; | |
border: none; | |
color: white; | |
border-radius: 20px; | |
line-height: 20px; | |
cursor: pointer; | |
transition: all 0.3s; | |
animation-timing-function: cubic-bezier(0.4, 0, 1, 1) !important; | |
&:focus { | |
box-shadow: 0px 0px 0px 3px rgba(0, 155, 255, 0.48); | |
} | |
&::-moz-focus-inner { | |
border: 0; | |
outline: 0; | |
padding: 0; | |
} | |
/* toggle knob */ | |
.knob { | |
position: absolute; | |
width: 20px; | |
height: 20px; | |
border-radius: 50%; | |
background-color: white; | |
top: 3px; | |
left: 3px; | |
transition: all 0.3s; | |
} | |
/* on */ | |
&[aria-checked="true"] { | |
background-color: #009bff; | |
:last-child { | |
opacity: 0; | |
transition: opacity 0.2s 0.1s; | |
} | |
.knob { | |
transform: translateX(24px); | |
} | |
} | |
/* off */ | |
&[aria-checked="false"] { | |
background-color: #3c3c3c; | |
:first-child { | |
opacity: 0; | |
transition: opacity 0.2s 0.1s; | |
} | |
} | |
/* disabled */ | |
&[aria-readonly="true"], | |
&:disabled { | |
cursor: not-allowed; | |
opacity: 0.8; | |
filter: grayscale(50%); | |
} | |
span { | |
pointer-events: none; | |
} | |
} | |
} |
Toggle switch.
A Pen by IpsumLorem16 on CodePen.