533 views
1.checkbox { 2 display: flex; 3 align-items: center; 4 margin: 10px; 5 font-family: Arial, sans-serif; 6 color: black; 7} 8 9.checkbox input { 10 display: none; 11} 12 13.checkbox .checkmark { 14 width: 28px; 15 height: 28px; 16 border-radius: 50%; 17 background-color: #ffffff2b; 18 box-shadow: rgba(0, 0, 0, 0.62) 0px 0px 5px inset, rgba(0, 0, 0, 0.21) 0px 0px 0px 24px inset, 19 #22cc3f 0px 0px 0px 0px inset, rgba(224, 224, 224, 0.45) 0px 1px 0px 0px; 20 cursor: pointer; 21 position: relative; 22} 23 24.checkbox .checkmark::after { 25 content: ""; 26 width: 18px; 27 height: 18px; 28 border-radius: 50%; 29 background-color: #e3e3e3; 30 box-shadow: transparent 0px 0px 0px 2px, rgba(0, 0, 0, 0.3) 0px 6px 6px; 31 position: absolute; 32 top: 50%; 33 left: 50%; 34 transform: translate(-50%, -50%); 35 transition: background-color 0.3s ease-in-out; 36} 37 38.checkbox input:checked + .checkmark { 39 background-color: #22cc3f; 40 box-shadow: rgba(0, 0, 0, 0.62) 0px 0px 5px inset, #22cc3f 0px 0px 0px 2px inset, #22cc3f 0px 0px 0px 24px inset, 41 rgba(224, 224, 224, 0.45) 0px 1px 0px 0px; 42} 43 44.checkbox input:checked + .checkmark::after { 45 background-color: white; 46} 47 48.checkbox .label { 49 margin-right: 10px; 50 user-select: none; 51 font-weight: 700; 52 cursor: pointer; 53}
MIT License