Przełącz pole wyboru
[type="checkbox"] {
position: relative;
left: 30px;
top: 0px;
z-index: 0;
-webkit-appearance: none;
}
[type="checkbox"] + label {
position: relative;
display: block;
cursor: pointer;
font-family: sans-serif;
font-size: 24px;
line-height: 1.3;
padding-left:70px;
position: relative;
margin-top: -30px;
}
[type="checkbox"] + label:before {
width: 60px;
height: 30px;
border-radius: 30px;
border: 2px solid #ddd;
background-color: #EEE;
content: "";
margin-right: 15px;
transition: background-color 0.5s linear;
z-index: 5;
position: absolute;
left: 0px;
}
[type="checkbox"] + label:after {
width: 30px;
height: 30px;
border-radius: 30px;
background-color: #fff;
content: "";
transition: margin 0.1s linear;
box-shadow: 0px 0px 5px #aaa;
position: absolute;
left: 2px;
top: 2px;
z-index: 10;
}
[type="checkbox"]:checked + label:before {
background-color: #2b8718;
}
[type="checkbox"]:checked + label:after {
margin: 0 0 0 30px;
}
Maximilian Steiger