Checkbox by AyuuLima
#e8e8e8
1/* Hide the default checkbox */ 2.container input { 3 display: none; 4} 5 6.container { 7 display: block; 8 position: relative; 9 cursor: pointer; 10 font-size: 30px; 11 user-select: none; 12 -webkit-tap-highlight-color: transparent; 13} 14 15.checkmark { 16 position: relative; 17 top: 0; 18 left: 0; 19 height: 1.3em; 20 width: 1.3em; 21 background-color: rgb(255, 255, 255); 22 border-radius: 0.3em; 23 transition: all 0.25s; 24 --spread: 50px; 25} 26 27.container input:checked ~ .checkmark { 28 background-color: #000000; 29 box-shadow: -10px -10px var(--spread) 0px rgb(17, 0, 248), 30 0 -10px var(--spread) 0px rgb(243, 11, 243), 31 10px -10px var(--spread) 0px rgb(253, 228, 0), 32 10px 0 var(--spread) 0px rgb(107, 255, 21), 33 10px 10px var(--spread) 0px rgb(76, 0, 255), 34 0 10px var(--spread) 0px rgb(255, 196, 0), 35 -10px 10px var(--spread) 0px rgb(90, 105, 240); 36} 37 38/* Create the checkmark/indicator (hidden when not checked) */ 39.checkmark:after { 40 content: ""; 41 position: absolute; 42 transform: rotate(0deg); 43 border: 0.1em solid rgba(0, 0, 0, 0.863); 44 left: 0; 45 top: 0; 46 width: 1.1em; 47 height: 1.1em; 48 border-radius: 0.25em; 49 transition: all 0.25s, border-width 0.1s; 50} 51 52/* Show the checkmark when checked */ 53.container input:checked ~ .checkmark:after { 54 left: 0.45em; 55 top: 0.25em; 56 width: 0.25em; 57 height: 0.5em; 58 border-color: rgba(238, 238, 238, 0) white white #fff0; 59 border-width: 0 0.15em 0.15em 0; 60 border-radius: 0em; 61 transform: rotate(45deg); 62} 63
398 views
398 views
MIT License