pub/cssjs-func-lib
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

checkbox switch

Browse Source
This commit is contained in:
stitz 2020-04-20 00:35:04 +02:00
parent 32a5408623
commit f340642a31
1 changed files with 37 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
switch.css Normal file
View File

@ -0,0 +1,37 @@
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-top: 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;
}