1/* Hide the default checkbox */2.container input{3display: none;4}56.container{7display: block;8position: relative;9cursor: pointer;10font-size: 20px;11user-select: none;12-webkit-tap-highlight-color: transparent;13}1415/* Create a custom checkbox */16.checkmark{17position: relative;18top: 0;19left: 0;20height: 1.3em;21width: 1.3em;22background-color: #2196F300;23border-radius: 0.25em;24transition: all 0.25s;25}2627/* When the checkbox is checked, add a blue background */28.container input:checked ~ .checkmark{29background-color: #2196F3;30}3132/* Create the checkmark/indicator (hidden when not checked) */33.checkmark:after{34content:"";35position: absolute;36transform:rotate(0deg);37border: 0.1em solid black;38left: 0;39top: 0;40width: 1.05em;41height: 1.05em;42border-radius: 0.25em;43transition: all 0.25s, border-width 0.1s;44}4546/* Show the checkmark when checked */47.container input:checked ~ .checkmark:after{48left: 0.45em;49top: 0.25em;50width: 0.25em;51height: 0.5em;52border-color: #fff0 white white #fff0;53border-width: 0 0.15em 0.15em 0;54border-radius: 0em;55transform:rotate(45deg);56}57