#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} 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.34em; 24 width: 1.3em; 25 background-color: #ccc; 26 transition: .4s ease-in-out; 27 border-radius: 50%; 28} 29 30.checkmark:hover { 31 background-color: grey; 32} 33 34/* When the checkbox is checked, add a blue background */ 35.container input:checked ~ .checkmark { 36 background-color: #2196F3; 37} 38 39/* Create the checkmark/indicator (hidden when not checked) */ 40.checkmark:after { 41 content: ""; 42 position: absolute; 43 display: none; 44} 45 46/* Show the checkmark when checked */ 47.container input:checked ~ .checkmark:after { 48 display: block; 49} 50 51/* Style the checkmark/indicator */ 52.container .checkmark:after { 53 left: 0.25em; 54 top: 0.29em; 55 width: 0.50em; 56 height: 0.50em; 57 border: solid white; 58 background-color: white; 59 border-radius: 50%; 60}
Comments
MIT License