Latest Design concept is the UI is Material Design. Most of the Mobile app design are Material. And all the Google Web and Mobile UI are now Material Design. Material Design is very Clean and Attractive for the user. Its will easily understand and easy to use by the user. Here I will give the Material Design Checkbox for you. In that not need a jQuery script. This code is pure css and html only.
.materail-checkbox{
cursor: pointer;
}
.materail-checkbox-input {
position: relative;
top: -0.375rem;
margin: 0 1rem 0 0;
cursor: pointer;
}
.materail-checkbox-input:before {
transition: all 0.3s ease-in-out;
content: "";
position: absolute;
left: 0;
z-index: 1;
width: 1rem;
height: 1rem;
border: 2px solid #e6e6e6;
}
.materail-checkbox-input:after {
content: "";
position: absolute;
top: -0.125rem;
left: 0;
width: 1.1rem;
height: 1.1rem;
background: #fff;
cursor: pointer;
}
.materail-checkbox-input:checked:before {
transform: rotate(-45deg);
height: .5rem;
border-color: #3aacf1;
border-top-style: none;
border-right-style: none;
}
.materail-checkbox-input{
position: relative;
top: -0.125rem;
}
<label><input type="checkbox" class="materail-checkbox-input"></label>
LIVE Preview Click the box below:
