Animating Custom Checkbox in HTML

Written by @kerixa 4 April 2021

Giving a special style to different parts of the website will increase the beauty and attractiveness of your website. In the following code we have a special style for checkboxes. In this code inactive and active checkboxes are shown and when an active checkbox is selected the lines animate! The cross symbol rotates and the checkbox gets selected. The same rotation occurs and then the cross symbol disappears when the box is unselected.

Code Snippet:

                                                
                                                <!-- this script is provided by https://www.htmlbestcodes.com coded by: Kerixa Inc. -->
<style>
/* Base for label styling */
[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
    position: absolute;
    left: 0;
    opacity: 0.01;
}

[type="checkbox"]:not(:checked) + label,
[type="checkbox"]:checked + label {
    position: relative;
    padding-left: 2.3em;
    font-size: 1.05em;
    line-height: 1.7;
    cursor: pointer;
}

/* checkbox aspect */
[type="checkbox"]:not(:checked) + label:before,
[type="checkbox"]:checked + label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 1.4em;
    height: 1.4em;
    border: 1px solid #aaa;
    background: #FFF;
    border-radius: .2em;
    box-shadow: inset 0 1px 3px rgba(0,0,0, .1), 0 0 0 rgba(203, 34, 237, .2);
    -webkit-transition: all .275s;
    transition: all .275s;
}

/* checked mark aspect */
[type="checkbox"]:not(:checked) + label:after,
[type="checkbox"]:checked + label:after {
    content: '✕';
    position: absolute;
    top: .525em;
    left: .18em;
    font-size: 1.375em;
    color: #CB22ED;
    line-height: 0;
    -webkit-transition: all .2s;
    transition: all .2s;
}

/* checked mark aspect changes */
[type="checkbox"]:not(:checked) + label:after {
    opacity: 0;
    -webkit-transform: scale(0) rotate(45deg);
    transform: scale(0) rotate(45deg);
}

[type="checkbox"]:checked + label:after {
    opacity: 1;
    -webkit-transform: scale(1) rotate(0);
    transform: scale(1) rotate(0);
}

/* Disabled checkbox */
[type="checkbox"]:disabled:not(:checked) + label:before,
[type="checkbox"]:disabled:checked + label:before {
    box-shadow: none;
    border-color: #bbb;
    background-color: #e9e9e9;
}

[type="checkbox"]:disabled:checked + label:after {
    color: #777;
}

[type="checkbox"]:disabled + label {
    color: #aaa;
}

/* Accessibility */
[type="checkbox"]:checked:focus + label:before,
[type="checkbox"]:not(:checked):focus + label:before {
    box-shadow: inset 0 1px 3px rgba(0,0,0, .1), 0 0 0 6px rgba(203, 34, 237, .2);
}




/*
* Useless styles, just for demo design
*/
body {
    font-family: "Open Sans", "Segoe WP", "Segoe UI", Helvetica, Arial, sans-serif;
    text-align: center;
    color: #34495E;
    background: #FCFDFD;
}

a[href^="#"] {
    color: #34495E;
    text-decoration: underline;
}

h1 {
    margin-top: 1em;
}

h2 {
    margin-top: 0;
    margin-bottom: 2em;
    color: #CB22ED;
    font-weight: normal;
}

form {
    width: 120px;
    margin: 0 auto 55px;
    text-align: left;
}

div p:first-child {
    font-weight: bold;
    font-size: 1.2em;
}

p {
    color: #aaa;
}

p a {
    color: inherit;
}

p + p {
    margin-top: 3em;
}

form p {
    margin: 15px 0;
    color: #34495E;
}

a[href^="#"] {
    color: #1da1f2;
}

.btn.btn {
    display: inline-block;
    padding: 8px 24px;
    text-decoration: none;
    border-radius: 40px;
    background: #34495E;
    color: #F2F2F2;
    transition: all .4s;
}

.btn.btn:hover,
.btn.btn:focus {
    background: #000;
}
h1{
    font-size:18px;
}
</style>
<form action="#">
  <p>
    <input type="checkbox" id="test1" />
    <label for="test1">Red</label>
  </p>
  <p>
    <input type="checkbox" id="test2" checked="checked" />
    <label for="test2">Yellow</label>
  </p>
  <p>
    <input type="checkbox" id="test3" checked="checked" disabled="disabled" />
    <label for="test3">Green</label>
  </p>
    <p>
      <input type="checkbox" id="test4" disabled="disabled" />
      <label for="test4">Brown</label>
  </p>
</form><a target='_blank' href='https://www.htmlbestcodes.com' style='font-size: 8pt; text-decoration: none'>Html Best Codes</a>

Example:

About @kerixa

I am Krishna Eydat. I studied Software Engineering at University of Waterloo in Canada. I lead a few tech companies. I am passionate about the way we are connected. I would like to be part of something big or be the big deal!

Comments

Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300