.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