#e8e8e8
1/* Hide the default checkbox */ 2.container input { 3 position: absolute; 4 opacity: 0; 5 cursor: pointer; 6 height: 0; 7 width: 0; 8} 9 10.container { 11 display: block; 12 position: relative; 13 cursor: pointer; 14 font-size: 25px; 15 user-select: none; 16} 17 18/* Create a custom checkbox */ 19.checkmark { 20 position: relative; 21 top: 0; 22 left: 0; 23 height: 1.3em; 24 width: 1.3em; 25 background: black; 26 border-radius: 50px; 27 transition: all 0.7s; 28 --spread: 20px; 29} 30 31/* When the checkbox is checked, add a blue background */ 32.container input:checked ~ .checkmark { 33 background: black; 34 box-shadow: -10px -10px var(--spread) 0px #5B51D8, 0 -10px var(--spread) 0px #833AB4, 10px -10px var(--spread) 0px #E1306C, 10px 0 var(--spread) 0px #FD1D1D, 10px 10px var(--spread) 0px #F77737, 0 10px var(--spread) 0px #FCAF45, -10px 10px var(--spread) 0px #FFDC80; 35} 36 37/* Create the checkmark/indicator (hidden when not checked) */ 38.checkmark:after { 39 content: ""; 40 position: absolute; 41 display: none; 42} 43 44/* Show the checkmark when checked */ 45.container input:checked ~ .checkmark:after { 46 display: block; 47} 48 49/* Style the checkmark/indicator */ 50.container .checkmark:after { 51 left: 0.45em; 52 top: 0.25em; 53 width: 0.25em; 54 height: 0.5em; 55 border: solid #f0f0f0; 56 border-width: 0 0.15em 0.15em 0; 57 transform: rotate(45deg); 58}
Comments
MIT License