#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 border-radius: 5px; 9} 10 11.container { 12 display: block; 13 position: relative; 14 cursor: pointer; 15 font-size: 20px; 16 user-select: none; 17 border-radius: 5px; 18 box-shadow: 2px 2px 0px rgb(183, 183, 183); 19} 20 21/* Create a custom checkbox */ 22.checkmark { 23 position: relative; 24 top: 0; 25 left: 0; 26 height: 1.3em; 27 width: 1.3em; 28 background-color: #ccc; 29 border-radius: 5px; 30} 31 32/* When the checkbox is checked, add a blue background */ 33.container input:checked ~ .checkmark { 34 box-shadow: 3px 3px 0px rgb(183, 183, 183); 35 transition: all 0.2s; 36 opacity: 1; 37 background-image: linear-gradient(45deg, rgb(100, 61, 219) 0%, rgb(217, 21, 239) 100%); 38} 39 40.container input ~ .checkmark { 41 transition: all 0.2s; 42 opacity: 1; 43 box-shadow: 1px 1px 0px rgb(183, 183, 183); 44} 45 46/* Create the checkmark/indicator (hidden when not checked) */ 47.checkmark:after { 48 content: ""; 49 position: absolute; 50 opacity: 0; 51 transition: all 0.2s; 52} 53 54/* Show the checkmark when checked */ 55.container input:checked ~ .checkmark:after { 56 opacity: 1; 57 transition: all 0.2s; 58} 59 60/* Style the checkmark/indicator */ 61.container .checkmark:after { 62 left: 0.45em; 63 top: 0.25em; 64 width: 0.25em; 65 height: 0.5em; 66 border: solid white; 67 border-width: 0 0.15em 0.15em 0; 68 transform: rotate(45deg); 69}
12K views
12K views
Comments
MIT License