37 lines
826 B
CSS
37 lines
826 B
CSS
input.switch[type="checkbox"] {
|
|
display:none;
|
|
}
|
|
input.switch[type="checkbox"] + label {
|
|
width: 60px;
|
|
height: 30px;
|
|
border-radius: 30px;
|
|
border: 2px solid #ddd;
|
|
background-color: #EEE;
|
|
display: inline-block;
|
|
content: "";
|
|
float: left;
|
|
margin-right: 5px;
|
|
transition: background-color 0.5s linear;
|
|
margin-bottom: 15px;
|
|
}
|
|
input.switch[type="checkbox"] + label:hover {
|
|
cursor: pointer;
|
|
}
|
|
input.switch[type="checkbox"] + label::before {
|
|
width: 30px;
|
|
height: 30px;
|
|
border-radius: 30px;
|
|
background-color: #fff;
|
|
display: block;
|
|
content: "";
|
|
float: left;
|
|
margin-right: 5px;
|
|
transition: margin 0.1s linear;
|
|
box-shadow: 0px 0px 5px #aaa;
|
|
}
|
|
input.switch[type="checkbox"]:checked+label{
|
|
background-color: #2b8718;
|
|
}
|
|
input.switch[type="checkbox"]:checked+label::before {
|
|
margin: 0 0 0 30px;
|
|
} |