Checkboxes
PHP
<form action="" method="POST" autocomplete="off" enctype="multipart/form-data">
<!-- Default Checkbox -->
<div class="controls_wrap">
<input type="checkbox" name="home_services[]" class="checkbox" id="homeService1" value="Mobile Responsiveness">
<label for="homeService1">Mobile Responsiveness</label>
<input type="checkbox" name="home_services[]" class="checkbox" id="homeService2" value="Search Engine Optimization">
<label for="homeService2">Search Engine Optimization</label>
</div>
<!-- Custom Checkbox -->
<div class="controls_wrap">
<input type="checkbox" name="services[]" class="custom_checkbox" id="service1" value="App Development">
<label for="service1">
<span class="checkbox_design">
<?= svg('iconCheckbox','') ?>
</span>
<span class="checkbox_text">App Development</span>
</label>
<input type="checkbox" name="services[]" class="custom_checkbox" id="service2" value="Video Marketing">
<label for="service2">
<span class="checkbox_design">
<?= svg('iconCheckbox','') ?>
</span>
<span class="checkbox_text">Video Marketing</span>
</label>
</div>
</form>
<!-- Icon -->
<symbol id="iconCheckbox" viewBox="0 0 12 10">
<polyline points="1.5 6 4.5 9 10.5 1"></polyline>
</symbol>CSS
/* Default Checkbox */
.checkbox{position:absolute;left:-999.9rem}
.checkbox + label{display:inline-block;font-size:1.6rem;padding:0 0 0 3rem;margin:0 2rem 1rem 0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;position:relative}
.checkbox + label::before{content:'';position:absolute;left:0;top:0;width:2rem;height:2rem;border:.1rem solid #ccc;background-color:#fff;-webkit-transition:all .3s ease;-o-transition:all .3s ease;-moz-transition:all .3s ease;transition:all .3s ease}
.checkbox + label::after{content:'✔\fe0e';position:absolute;top:-.05rem;left:.45rem;font-size:1.4rem;color:#fff;-webkit-transition:all .2s;-o-transition:all .2s;-moz-transition:all .2s;transition:all .2s}
.checkbox:not(:checked) + label::after{opacity:0;-webkit-transform:scale(0);-moz-transform:scale(0);-ms-transform:scale(0);-o-transform:scale(0);transform:scale(0)}
.checkbox:checked + label::before{border-color:#09a5be;background-color:#09a5be}
.checkbox:checked + label::after{opacity:1;-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1)}
/* Custom Checkbox */
.custom_checkbox{position:absolute;left:-999.9rem}
.custom_checkbox + label{display:-webkit-inline-box;display:-webkit-inline-flex;display:-moz-inline-box;display:-ms-inline-flexbox;display:inline-flex;align-items:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;margin:0 2rem 1rem 0}
.custom_checkbox + label .checkbox_design{-webkit-box-flex:0;-webkit-flex:0 0 2rem;-moz-box-flex:0;-ms-flex:0 0 2rem;flex:0 0 2rem;width:2rem;height:2rem;border:.1rem solid #ccc;background-color:#fff;-webkit-border-radius:.3rem;-moz-border-radius:.3rem;border-radius:.3rem;position:relative;-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1);-webkit-transition:all .2s ease;-o-transition:all .2s ease;-moz-transition:all .2s ease;transition:all .2s ease}
.custom_checkbox + label .checkbox_design svg{position:absolute;top:.4rem;left:.3rem;width:1.2rem;height:1rem;fill:none;stroke:transparent;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1.6rem;stroke-dashoffset:1.6rem;-webkit-transition:all .3s ease;-o-transition:all .3s ease;-moz-transition:all .3s ease;transition:all .3s ease;-webkit-transition-delay:.1s;-moz-transition-delay:.1s;-o-transition-delay:.1s;transition-delay:.1s;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
.custom_checkbox + label .checkbox_design::before{content:"";position:absolute;top:0;left:0;display:block;width:100%;height:100%;opacity:1;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;background-color:#09a5be;-webkit-transform:scale(0);-moz-transform:scale(0);-ms-transform:scale(0);-o-transform:scale(0);transform:scale(0)}
.custom_checkbox + label .checkbox_text{display:inline-block;font-size:1.6rem;padding:0 0 0 1rem}
.custom_checkbox:checked + label .checkbox_design{background-color:#09a5be;border-color:#09a5be}
.custom_checkbox:checked + label .checkbox_design svg{stroke: #ffffff;stroke-dashoffset:0}
.custom_checkbox:checked + label .checkbox_design::before{opacity:0;-webkit-transform:scale(3.5);-moz-transform:scale(3.5);-ms-transform:scale(3.5);-o-transform:scale(3.5);transform:scale(3.5);-webkit-transition:all .6s ease;-o-transition:all .6s ease;-moz-transition:all .6s ease;transition:all .6s ease}
@media (-ms-high-contrast: none),(-ms-high-contrast: active),(-moz-touch-enabled: 0),(hover: hover) {
.custom_checkbox + label:hover .checkbox_design{border-color:#09a5be}
}SCSS
/* Vars */
$white: #ffffff;
$grey: #cccccc;
$main: #09a5be;
/* Default Checkbox */
.checkbox {
position: absolute;
left: -999.9rem;
+ label {
display: inline-block;
font-size: 1.6rem;
padding: 0 0 0 3rem;
margin: 0 2rem 1rem 0;
user-select: none;
cursor: pointer;
position: relative;
&::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 2rem;
height: 2rem;
border: .1rem solid $grey;
background-color: $white;
transition: all 0.3s ease;
}
&::after {
content: '✔\fe0e';
position: absolute;
top: -0.05rem;
left: 0.45rem;
font-size: 1.4rem;
color: $white;
transition: all 0.2s;
}
}
&:not(:checked) + label::after {
opacity: 0;
transform: scale(0);
}
&:checked + label {
&::before {
border-color: $main;
background-color: $main;
}
&::after {
opacity: 1;
transform: scale(1);
}
}
}
/* Custom Checkbox */
.custom_checkbox {
position: absolute;
left: -999.9rem;
+ label {
display: inline-flex;
align-items: center;
user-select: none;
cursor: pointer;
margin: 0 2rem 1rem 0;
.checkbox_design {
flex: 0 0 2rem;
width: 2rem;
height: 2rem;
border: .1rem solid $grey;
background-color: $white;
border-radius: .3rem;
position: relative;
transform: scale(1);
transition: all .2s ease;
svg {
position: absolute;
top: .4rem;
left: .3rem;
width: 1.2rem;
height: 1rem;
fill: none;
stroke: transparent;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 1.6rem;
stroke-dashoffset: 1.6rem;
transition: all .3s ease;
transition-delay: .1s;
transform: translate3d(0,0,0);
}
&::before {
content: "";
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
opacity: 1;
border-radius: 50%;
background-color: $main;
transform: scale(0);
}
}
.checkbox_text {
display: inline-block;
font-size: 1.6rem;
padding:0 0 0 1rem;
}
}
&:checked + label {
.checkbox_design {
background-color: $main;
border-color: $main;
svg {
stroke: $white;
stroke-dashoffset: 0;
}
&::before {
opacity: 0;
transform: scale(3.5);
transition: all .6s ease;
}
}
}
}
@media (-ms-high-contrast: none), (-ms-high-contrast: active), (-moz-touch-enabled: 0), (hover: hover) {
.custom_checkbox + label:hover .checkbox_design {border-color: $main}
}