Checkbox by magbanum
#e8e8e8
1/* Customize the label (the container) */ 2.container { 3 display: block; 4 position: relative; 5 cursor: pointer; 6 font-size: 22px; 7 user-select: none; 8} 9 10/* Hide the browser's default checkbox */ 11.container input { 12 position: absolute; 13 opacity: 0; 14 cursor: pointer; 15 height: 0; 16 width: 0; 17} 18 19/* Create a custom checkbox */ 20.checkmark { 21 position: absolute; 22 top: -12px; 23 left: -12px; 24 height: 25px; 25 width: 25px; 26 background-color: #ccc; 27 border: solid gray 1px; 28 border-radius: 4px; 29} 30 31/* When the checkbox is checked, add a blue background */ 32.container input:checked ~ .checkmark { 33 background-color: #666666; 34} 35 36/* Create the checkmark/indicator (hidden when not checked) */ 37.checkmark:after { 38 content: ""; 39 position: absolute; 40 display: none; 41} 42 43/* Show the checkmark when checked */ 44.container input:checked ~ .checkmark:after { 45 display: block; 46} 47 48/* Style the checkmark/indicator */ 49.container .checkmark:after { 50 left: 0.4rem; 51 top: 0.2rem; 52 width: 6px; 53 height: 10px; 54 border: solid white; 55 border-width: 0 3px 3px 0; 56 transform: rotate(45deg); 57}
3.2K views
3.2K views
MIT License