#212121
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: 20px; 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: #606062; 26 border-radius: 5px; 27 box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.30), 0px 1px 1px rgba(0,5); 28} 29 30/* When the checkbox is checked, add a blue background */ 31.container input:checked ~ .checkmark { 32 background-image: linear-gradient(#b9e9b3,#a8e4a0) 33} 34 35/* Create the checkmark/indicator (hidden when not checked) */ 36.checkmark:after { 37 content: ""; 38 position: absolute; 39 display: none; 40} 41 42/* Show the checkmark when checked */ 43.container input:checked ~ .checkmark:after { 44 display: block; 45} 46 47/* Style the checkmark/indicator */ 48.container .checkmark:after { 49 left: 0.45em; 50 top: 0.25em; 51 width: 0.25em; 52 height: 0.5em; 53 border: solid white; 54 border-width: 0 0.15em 0.15em 0; 55 transform: rotate(45deg); 56}
7.7K views
7.7K views
Comments
MIT License