@KSAplay
Jan 14, 2023290 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 user-select: none; 16 border: 5px solid white; 17} 18 19.checkmark { 20 position: absolute; 21 top: 0; 22 left: 0; 23 width: 100%; 24 height: 100%; 25} 26 27.checkmark:after { 28 content: ''; 29 position: absolute; 30 top: 25%; 31 left: 25%; 32 background-color: white; 33 width: 50%; 34 height: 50%; 35 transform: scale(0); 36 transition: .1s ease; 37} 38 39.container input:checked ~ .checkmark:after { 40 transform: scale(1); 41}
HTML
1<label class="container"> 2 <input checked="checked" type="checkbox"> 3 <div class="checkmark"></div> 4</label>