Skip to content

Instantly share code, notes, and snippets.

@feo52

feo52/index.html

Last active July 8, 2017 15:30
Show Gist options
  • Save feo52/7fe0c5100fb2631ab835 to your computer and use it in GitHub Desktop.
Save feo52/7fe0c5100fb2631ab835 to your computer and use it in GitHub Desktop.
Download ZIP
Pure CSS Toggle Switch with :checked
Raw
index.html
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Pure CSS Toggle Switch with :checked</title>
<link rel="stylesheet" href="style.css">
<style>
.toggle-switch { border: solid lightgray 0.125em; } /* for Chrome bug? */
</style>
</head>
<body>
<hr>
<input id ="toggle1" class="toggle-status" type="checkbox">
<label for="toggle1" class="toggle-switch "></label><span class="toggle-string ">x1 </span>
<hr>
<input id ="toggle2" class="toggle-status" type="checkbox">
<label for="toggle2" class="toggle-switch toggle-x2 toggle-rounded"></label><span class="toggle-string toggle-x2">x2 rounded</span>
<hr>
<input id ="toggle3" class="toggle-status" type="checkbox">
<label for="toggle3" class="toggle-switch toggle-x3 "></label><span class="toggle-string toggle-x3">x3 </span>
<hr>
<input id ="toggle4" class="toggle-status" type="checkbox">
<label for="toggle4" class="toggle-switch toggle-x4 toggle-rounded"></label><span class="toggle-string toggle-x4">x4 rounded</span>
<hr>
<input id ="toggle5" class="toggle-status" type="checkbox">
<label for="toggle5" class="toggle-switch toggle-x5 "></label><span class="toggle-string toggle-x5">x5 </span>
<hr>
<input id ="toggle6" class="toggle-status" type="checkbox">
<label for="toggle6" class="toggle-switch toggle-x6 toggle-rounded"></label><span class="toggle-string toggle-x6">x6 rounded</span>
<hr>
</body>
</html>
Raw
style.css
/* -------------------------------------------------------------
Pure CSS Toggle Switch with :checked
---------------------------------------------------------- */
.toggle-status {
display: none;
}
.toggle-switch {
-webkit-tap-highlight-color: rgba(0,0,0,0);
vertical-align: bottom;
cursor: pointer;
display: inline-block;
position: relative;
width: 1.625em; /* calc(1em * 2 - 0.125em * 2 - 0.0625em * 2); */
height: 1.000em; /* calc(1em * 1); */
box-sizing: border-box;
border: solid lightgray 0.125em;
transition: border 0.5s;
}
.toggle-status:checked + .toggle-switch {
border: solid lightgreen 0.125em;
}
.toggle-switch::after {
content: "";
display: inline-block;
position: absolute;
top: 0.0625em;
left: 0.0625em;
width: 0.625em; /* calc(1em - 0.125em * 2 - 0.0625em * 2); */
height: 0.625em; /* calc(1em - 0.125em * 2 - 0.0625em * 2); */
background: lightgray;
transition: background 0.5s, left 0.5s;
}
.toggle-status:checked + .toggle-switch::after {
background: lightgreen;
left: 0.6875em; /* calc(1em - 0.125em * 2 - 0.0625em); */
}
.toggle-string {
line-height: 1;
}
/* ------------------------------------------ */
.toggle-rounded {
border-radius: 0.5000em; /* calc(1em / 2); */
}
.toggle-rounded::after {
border-radius: 0.3125em; /* calc(1em / 2 - 0.125em - 0.0625em); */
}
/* ---------------------------------------------
Size
------------------------------------------ */
.toggle-x1 { font-size: 1rem; }
.toggle-x2 { font-size: 2rem; }
.toggle-x3 { font-size: 3rem; }
.toggle-x4 { font-size: 4rem; }
.toggle-x5 { font-size: 5rem; }
.toggle-x6 { font-size: 6rem; }
/* ------------------------------------------ */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment