Skip to content

Instantly share code, notes, and snippets.

@emilio

emilio/switch.html

Created June 11, 2019 10:56
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save emilio/73329635b3fffed19fcefb16ba7de8c4 to your computer and use it in GitHub Desktop.
Save emilio/73329635b3fffed19fcefb16ba7de8c4 to your computer and use it in GitHub Desktop.
Download ZIP
Switch-styled checkbox.
Raw
switch.html
<!doctype html>
<style>
.switch {
-moz-appearance: none;
-webkit-appearance: none;
display: inline-block;
position: relative;
background: #ccc;
border-radius: 1em;
height: 1em;
width: 2em;
}
.switch::before {
display: inline-block;
content: "";
border: 1px solid #aaa;
box-sizing: border-box;
background-color: #eee;
width: 1.2em;
height: 1.2em;
vertical-align: top;
margin-top: -0.1em;
border-radius: 1.2em;
transform: translateX(0);
transition: transform .4s ease;
}
.switch:hover::before {
background-color: white;
}
.switch:focus {
outline: none;
}
.switch:focus::before {
border-color: #008dff;
}
.switch:checked::before {
transform: translateX(calc(100% - 0.3em));
}
</style>
<input type="checkbox" class="switch">
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment