346 views
1.checkbox { 2 display: inline-flex; 3 align-items: center; 4 cursor: pointer; 5} 6 7.checkbox input[type="checkbox"] { 8 opacity: 0; 9 position: absolute; 10} 11 12.checkbox .checkmark { 13 display: inline-flex; 14 justify-content: center; 15 align-items: center; 16 width: 20px; 17 height: 20px; 18 border: 1px solid #ccc; 19 border-radius: 50%; 20 transition: background-color 0.2s ease; 21} 22 23.checkbox input[type="checkbox"]:checked + .checkmark { 24 background-color: #0078d4; 25 border-color: #0078d4; 26} 27 28.checkbox input[type="checkbox"]:checked + .checkmark:after { 29 content: ""; 30 display: block; 31 width: 6px; 32 height: 6px; 33 border-radius: 50%; 34 background-color: #fff; 35 transition: transform 0.2s ease; 36 transform: scale(1); 37} 38 39.checkbox .checkmark:after { 40 content: ""; 41 display: block; 42 width: 6px; 43 height: 6px; 44 border-radius: 50%; 45 background-color: transparent; 46 transform: scale(0); 47 transition: transform 0.2s ease; 48} 49
JkHuger
JkHuger
MIT License