#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.3em; 24 width: 1.3em; 25 background-color: #ccc; 26 border-radius: 100%; 27 background: #e8e8e8; 28 box-shadow: 3px 3px 5px #c5c5c5, 29 -3px -3px 5px #ffffff; 30 transition-duration: 0.5s; 31} 32 33.container input:checked ~ .checkmark { 34 box-shadow: inset 3px 3px 5px #c5c5c5, 35 inset -3px -3px 5px #ffffff; 36} 37 38.checkmark:after { 39 content: ""; 40 position: absolute; 41 opacity: 0; 42} 43 44.container input:checked ~ .checkmark:after { 45 opacity: 1; 46} 47 48.container .checkmark:after { 49 left: 0.45em; 50 top: 0.25em; 51 width: 0.25em; 52 height: 0.5em; 53 border: solid darkgray; 54 border-width: 0 0.15em 0.15em 0; 55 transform: rotate(45deg); 56}
Comments
1omriluz 1. October at 12:37
1. October at 12:37
Love that it kind of sticks out. Really cool
MIT License