Skip to content

Instantly share code, notes, and snippets.

@williankeller

williankeller/Checkbox Usando Switch

Created June 18, 2015 14:31
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save williankeller/98e02f132d7645b68685 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save williankeller/98e02f132d7645b68685 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Checkbox Usando Switch
<html>
<head>
<title>Checkbox Usando Switch</title>
<style>
*, :after, :before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
label {
display: inline-block;
max-width: 100%;
margin-bottom: 5px;
font-weight: 700;
}
label {
font-weight: 500;
}
button, input, optgroup, select, textarea {
margin: 0;
font: inherit;
color: inherit;
}
button, input, select, textarea {
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
input[type=checkbox], input[type=radio] {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
}
input[type=checkbox], input[type=radio] {
margin: 4px 0 0;
line-height: normal;
}
.switch input {
position: absolute;
opacity: 0;
}
.switch {
vertical-align: middle;
margin-bottom: 0;
line-height: 0;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.switch input~.switch {
font-size: 24px;
position: relative;
display: inline-block;
vertical-align: middle;
background-color: #fafafa;
-webkit-box-shadow: inset 0 0 0 1px #e5e5e5;
box-shadow: inset 0 0 0 1px #e5e5e5;
cursor: pointer;
height: 24px;
width: 38.4px;
border-radius: 28px;
-webkit-transition: border .25s .15s,-webkit-box-shadow .25s .3s,padding .25s;
-o-transition: border .25s .15s,box-shadow .25s .3s,padding .25s;
transition: border .25s .15s,box-shadow .25s .3s,padding .25s;
}
.switch input:checked~.switch {
border-color: #4caf50;
-webkit-box-shadow: inset 0 0 0 .6em #4caf50;
box-shadow: inset 0 0 0 .6em #4caf50;
-webkit-transition: border .25s,-webkit-box-shadow .25s,padding .25s .15s;
-o-transition: border .25s,box-shadow .25s,padding .25s .15s;
transition: border .25s,box-shadow .25s,padding .25s .15s;
}
.switch.switch-success input:checked~.switch {
border-color: #4caf50;
-webkit-box-shadow: inset 0 0 0 .6em #4caf50;
box-shadow: inset 0 0 0 .6em #4caf50;
}
.switch input~.switch:after {
position: absolute;
background-color: #fff;
border: 1px solid #e5e5e5;
border-radius: 24px;
-webkit-box-shadow: 0 1px 4px rgba(0,0,0,.01),0 2px 4px rgba(0,0,0,.05);
box-shadow: 0 1px 4px rgba(0,0,0,.01),0 2px 4px rgba(0,0,0,.05);
content: '';
display: block;
height: 24px;
width: 24px;
left: 0;
top: 0;
-webkit-transition: border .25s .15s,left .25s .1s,right .15s .175s;
-o-transition: border .25s .15s,left .25s .1s,right .15s .175s;
transition: border .25s .15s,left .25s .1s,right .15s .175s;
}
.switch input:checked~.switch:after {
border-color: #4caf50;
left: .6em;
right: 0;
-webkit-transition: border .25s,left .15s .25s,right .25s .175s;
-o-transition: border .25s,left .15s .25s,right .25s .175s;
transition: border .25s,left .15s .25s,right .25s .175s;
}
.switch.switch-success input:checked~.switch:after {
border-color: #4caf50;
}
</style>
</head>
<body>
<label class="switch switch-success">
<input type="checkbox" checked="">
<span class="switch"></span>
</label>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment