#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 border-radius: 50%; 16 user-select: none; 17 border: 5px solid white; 18 display: block; 19} 20 21.checkmark { 22 position: absolute; 23 top: 0; 24 left: 0; 25 width: 100%; 26 height: 100%; 27} 28 29.checkmark:after { 30 content: ''; 31 position: absolute; 32 top: 25%; 33 left: 25%; 34 background-color: white; 35 width: 50%; 36 height: 50%; 37 border-radius: 50%; 38 transform: scale(0); 39 transition: 100ms ease; 40} 41 42.container input:checked ~ .checkmark:after { 43 transform: scale(1); 44}
Comments
MIT License