HTML
<div class="card">
<h2>Fancy Checkbox, Pure CSS</h2>
<label class="fancy-checkbox">
<p>Fancy checkbox 1</p>
<input type="checkbox" >
<i></i>
</label>
<label class="fancy-checkbox halo-bg">
<p>With background color</p>
<input type="checkbox" >
<i></i>
</label>
<label class="fancy-checkbox green">
<p>Yellowgreen</p>
<input type="checkbox" >
<i></i>
</label>
</div>
SCSS
*, *:after, *:before {
box-sizing: border-box;
}
// ------ fancy-checkbox ------ //
$default-color: #ccc;
$checked-color: #3cf;
.fancy-checkbox {
display: block;
position: relative;
margin: 15px 0;
overflow: hidden;
p {
padding: 10px;
margin: 0;
float: left;
line-height: 20px;
}
input {
position: absolute;
visibility: hidden;
& + i {
border: 2px solid $default-color;
width: 100px;
height: 40px;
padding: 2px;
float: left;
border-radius: 20px;
transition: all .25s;
&:after {
content: ' ';
background-color: $default-color;
float: left;
width: 50%;
height: 100%;
border-radius: inherit;
transition: inherit;
}
}
&:checked + i {
border-color: $checked-color;
&:after {
background-color: $checked-color;
margin-left: 50%;
}
}
}
}
// ------ //
.fancy-checkbox.halo-bg {
input {
&:checked + i {
background-color: #bbeeff;
}
}
}
.fancy-checkbox.green {
input {
&:checked + i {
border-color: yellowgreen;
&:after {
background-color: yellowgreen;
}
}
}
}
.card {
background-color: #fff;
border-radius: 4px;
width: 600px;
margin: 30px auto;
padding: 20px 15px;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
display: flex;
flex-direction: column;
align-items: center;
}
