.ginput_container_checkbox { .gchoice { margin-bottom: 1rem; @media (min-width: $md) { margin-bottom: 0; } label { position: relative; right: -4px; @media (min-width: $md) { right: -8px; } &::before { position: absolute; content: ' '; width: 16px; height: 16px; border: 1px solid $elgray; background: $lwhite; top: 3px; left: -20px; border-radius: 5px; @media (min-width: $md) { width: 20px; height: 20px; top: 3px; left: -26px; } } &::after { content: ""; position: absolute; border-bottom: 2px solid $elgray; border-left: 2px solid $elgray; height: 6px; left: -16px; opacity: 0; top: 7px; transform: rotate(-45deg); transition: all .3s linear; width: 9px; @media (min-width: $md) { top: 9px; width: 10px; left: -21px; } } } input { opacity: 0; } input[type="checkbox"]:checked~label:after { opacity: 1 !important; } } } .ginput_container_radio { .gchoice { margin-bottom: 1rem; @media (min-width: $md) { margin-bottom: 0; } label { position: relative; right: -4px; @media (min-width: $md) { right: -8px; } &::before { position: absolute; content: ' '; width: 16px; height: 16px; border: 2px solid $primary; background: $white; top: 3; left: -20px; border-radius: 50%; @media (min-width: $md) { width: 20px; height: 20px; top: 3px; left: -26px; } } &::after { content: ""; position: absolute; width: 8px; height: 8px; left: -16px; opacity: 0; top: 7px; border-radius: 50%; background: $primary; transition: all .3s linear; @media (min-width: $md) { width: 10px; height: 10px; top: 8px; left: -21px; } } } input { opacity: 0; } input[type="radio"]:checked~label:after { opacity: 1 !important; } } }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter