136 views
CSSAdd prefixes
1.container input { 2 position: absolute; 3 opacity: 0; 4 cursor: pointer; 5 height: 0; 6 width: 0; 7} 8 9.container { 10 position: relative; 11 cursor: pointer; 12 font-size: 17px; 13 width: 2em; 14 height: 2em; 15 border-radius: 50%; 16 user-select: none; 17 border: 5px solid white; 18} 19 20.checkmark { 21 position: absolute; 22 top: 0; 23 left: 0; 24 width: 100%; 25 height: 100%; 26} 27 28.checkmark:after { 29 content: ''; 30 position: absolute; 31 top: 25%; 32 left: 25%; 33 background-color: white; 34 width: 50%; 35 height: 50%; 36 border-radius: 50%; 37 transform: scale(0); 38 transition: 100ms ease; 39} 40 41.container input:checked ~ .checkmark:after { 42 transform: scale(1); 43}
HTML
1<label class="container"> 2 <input checked="checked" type="checkbox"> 3 <div class="checkmark"></div> 4</label>