Decorative checkboxes
Impressed by http://www.paulund.co.uk/style-checkboxes-with-css I decided to create my own checkboxes followed by Paul Underwood. First works.
Impressed by http://www.paulund.co.uk/style-checkboxes-with-css I decided to create my own checkboxes followed by Paul Underwood. First works.
<section style="margin-top: 50px;">
<section style="margin-top: 50px;">
<header style="margin-bottom: 30px;">My checkboxes</header>
<div class="checkbox">
<input type="checkbox" id="checkbox"/>
<label for="checkbox"></label>
</div></section>input[type="checkbox"]{
input[type="checkbox"]{
display: none;
}
.checkbox{position: relative;
width: 60px;
height: 19px;
background-color: green;
border-radius: 10px;
}
.checkbox input[type="checkbox"] + label{
left: 0%;
top: 0px;
cursor: pointer;
position: absolute; /*otherwise ,,left: x px;" isn't working*/
display: block;
width: 30px;
height: 19px;
border-radius: 100%;
background-color: red;
box-shadow: 0px 0px 3px 2px red;
transition: all .5s ease;
transition: all .5s ease;
transition: all .5s ease;
transition: all .5s ease;
transition: all .5s ease;
}
.checkbox input[type="checkbox"]:checked + label{
left: 50%;
z-index: 1;
background-color: blue;
box-shadow: 0px 0px 3px 2px green;
}
.checkbox input[type="checkbox"]:checked + label:before{
content: "\2714";
position: absolute;
left: 8px;
color: white;
}
.checkbox input[type="checkbox"] + label:before{
content: "\2718";
position: absolute;
left: 8px;
color: white;
}
.checkbox:before{
position: absolute;
left: 5px;
content: "Yes";
color: white;
font-family: serif;
}
.checkbox:after{
position: absolute;
left: 35px;
content: "No";
color: white;
font-family: serif;
}