Skip to content

Instantly share code, notes, and snippets.

@schuchard

schuchard/css-only-checkbox.md

Last active May 19, 2018 21:47
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 schuchard/1f1c1e7fe3d5e1f1ae05ff24e1c16591 to your computer and use it in GitHub Desktop.
Save schuchard/1f1c1e7fe3d5e1f1ae05ff24e1c16591 to your computer and use it in GitHub Desktop.
Download ZIP
css-only-checkbox
Raw
css-only-checkbox.md
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Checkbox switch, input element only + CSS, crossbrowser</title>
<style>
input.switch {
-moz-appearance: none;
-webkit-appearance: none;
-o-appearance: none;
position: relative;
height: 20px;
width: 40px;
border-radius: 10px;
box-shadow: inset -20px 0px 0px 1px rgba(192, 192, 192, 0.5);
background-color: white;
border: 1px solid rgba(192, 192, 192, 1);
outline: none;
-webkit-transition: 0.2s;
transition: 0.2s;
}
input.switch:checked {
box-shadow: inset 20px 0px 0px 1px hsla(211, 96%, 55%, 0.5);
border: 1px solid rgba(33, 150, 243, 1);
}
input.switch::-ms-check {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
/* IE 8 */
filter: alpha(opacity=0);
/* IE 5-7 */
opacity: 0;
}
input.switch:hover {
cursor: pointer;
}
</style>
</head>
<body>
<input class="switch" type="checkbox">
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment