#212121
1.container input { 2 position: absolute; 3 opacity: 0; 4 cursor: pointer; 5 height: 0; 6 width: 0; 7} 8 9.container { 10 display: block; 11 position: relative; 12 cursor: pointer; 13 font-size: 30px; 14 user-select: none; 15} 16 17.checkmark { 18 position: relative; 19 top: 0; 20 left: 0; 21 height: 1.6em; 22 width: 1.6em; 23 border-radius: 50%; 24 background: #ffeded38; 25 transition: all 0.2s ease; 26} 27 28.checkmark { 29 opacity: 0.4; 30} 31 32.container input:checked ~ .checkmark { 33 background: linear-gradient(144deg,#af40ff,#5b42f3 50%,#00ddeb); 34 opacity: 0.9; 35 transition: all 0.2s ease; 36} 37 38.checkmark:after { 39 content: ""; 40 position: absolute; 41 display: none; 42} 43 44.container input:checked ~ .checkmark:after { 45 display: block; 46} 47 48.container .checkmark:after { 49 left: 0.61em; 50 top: 0.43em; 51 width: 0.25em; 52 height: 0.5em; 53 border: solid rgb(255, 255, 255); 54 border-width: 0 0.15em 0.15em 0; 55 transform: rotate(45deg); 56}
627 views
627 views
Comments
MIT License