#e8e8e8
1/* Customize the label (the container) */ 2.container { 3 display: block; 4 position: relative; 5 padding-left: 35px; 6 margin-bottom: 12px; 7 cursor: pointer; 8 font-size: 22px; 9 user-select: none; 10} 11 12/* Hide the browser's default checkbox */ 13.container input { 14 position: absolute; 15 opacity: 0; 16 cursor: pointer; 17 height: 0; 18 width: 0; 19} 20 21/* Create a custom checkbox */ 22.checkmark { 23 position: absolute; 24 top: 0; 25 left: 0; 26 height: 25px; 27 width: 25px; 28 background-color: #ccc; 29} 30 31/* When the checkbox is checked, add a blue background */ 32.container input:checked ~ .checkmark { 33 background-color: #2196F3; 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: 9px; 51 top: 5px; 52 width: 5px; 53 height: 10px; 54 border: solid white; 55 border-width: 0 3px 3px 0; 56 transform: rotate(45deg); 57}
3.8K views
3.8K views
Comments
MIT License