#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: 2.3em; 24 width: 2.3em; 25 background-color: #ccc; 26 border-radius: 50%; 27 transition: .4s; 28} 29 30.checkmark:hover { 31 box-shadow: inset 17px 17px 16px #b3b3b3, 32 inset -17px -17px 16px #ffffff; 33} 34 35/* When the checkbox is checked, add a blue background */ 36.container input:checked ~ .checkmark { 37 box-shadow: none; 38 background-color: limegreen; 39 transform: rotateX(360deg); 40} 41 42.container input:checked ~ .checkmark:hover { 43 box-shadow: 3px 3px 3px rgba(0,0,0,0.2); 44} 45 46/* Create the checkmark/indicator (hidden when not checked) */ 47.checkmark:after { 48 content: ""; 49 position: absolute; 50 display: none; 51} 52 53/* Show the checkmark when checked */ 54.container input:checked ~ .checkmark:after { 55 display: block; 56} 57 58/* Style the checkmark/indicator */ 59.container .checkmark:after { 60 left: 0.96em; 61 top: 0.7em; 62 width: 0.25em; 63 height: 0.5em; 64 border: solid white; 65 border-width: 0 0.15em 0.15em 0; 66 box-shadow: 0.1em 0.1em 0em 0 rgba(0,0,0,0.3); 67 transform: rotate(45deg); 68}
4.9K views
4.9K views
Comments
MIT License