#e8e8e8
1.check_container { 2 position: relative; 3} 4 5.checkbox { 6 position: relative; 7 top: 1px; 8 width: 30px; 9 height: 30px; 10 border: 2px solid #212fab; 11 border-radius: 50px; 12 cursor: pointer; 13 display: block; 14 transition: all 0.3s linear; 15} 16 17.checkbox::after { 18 content: ""; 19 position: absolute; 20 top: 25%; 21 left: 20%; 22 width: 6px; 23 height: 12px; 24 opacity: 0; 25 transform: rotate(45deg) scale(0) translate(-50%, -50%); 26 border-right: 4px solid #ffffff; 27 border-bottom: 4px solid #ffffff; 28 transition: all 0.3s linear; 29} 30 31#checkbox:checked ~ .checkbox::after { 32 opacity: 1 !important; 33 transform: rotate(50deg) scale(1) translate(20%, -25%) !important; 34} 35 36#checkbox:checked ~ .checkbox { 37 background: #212fab; 38 border: none; 39} 40 41.hidden { 42 display: none !important; 43} 44
1.3K views
1.3K views
Comments
MIT License