Skip to content

Instantly share code, notes, and snippets.

@jbd91
Last active September 14, 2019 19:25
Show Gist options
  • Save jbd91/fea8b36354d723de319dd7573774dc15 to your computer and use it in GitHub Desktop.
Save jbd91/fea8b36354d723de319dd7573774dc15 to your computer and use it in GitHub Desktop.
Custom Gravity form Radio buttons
input[type=radio] label {
position: relative;
cursor: pointer;
}
input[type=radio] + label:before {
content: '';
display: inline-block;
width: 34px;
height: 34px;
margin: 0 1rem 0 0;
vertical-align: middle;
cursor: pointer;
border-radius: 50%;
border: 1px solid #fff;
}
input[type=radio]:checked + label {
position: relative;
&:after {
content: "";
position: absolute;
top: 19px;
left: 10px;
width: 14px;
height: 14px;
background-color: $red;
border-radius: 50%;
display: inline-block;
cursor: pointer;
}
&:before {
background-color: transparent;
}
}
// Set colors separately
.gchoice_1_10_0 {
margin-bottom: 0 !important;
input[type=radio]:checked + label {
&:after {
background-color: $gold;
}
&:before {
background-color: transparent;
border: 1px solid $gold;
}
}
label {
color: $gold;
}
}
.gchoice_1_10_1 {
input[type=radio]:checked + label {
&:after {
background-color: $red;
}
&:before {
background-color: transparent;
border: 1px solid $red;
}
}
label {
color: $red;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment