#212121
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 display: block; 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 transform: scale(0); 37 transition: .1s ease; 38} 39 40.container input:checked ~ .checkmark:after { 41 transform: scale(1); 42}
5.2K views
5.2K views
Comments
Variations
1 MIT License