Skip to main content
How Can We Help?
Gravity Form Radio Button and checkbox styling
/* Form fix */
body .gform_wrapper #field_submit input, body .gform_wrapper .gform_footer input.button, body .gform_wrapper .gform_page_footer input.button, body div.form_saved_message div.form_saved_message_emailform form input[type=submit] {
font-weight: 600 !important;
}
.gform_wrapper.gravity-theme .gfield_checkbox label, .gform_wrapper.gravity-theme .gfield_radio label {
font-size: 16px;
}
.gform_wrapper .gfield.consent input[type="checkbox"] {
border-color: red;
border-style: solid;
border-width: 5px;
}
input[type="radio"] {
display: none !important;
cursor: pointer!important;
}
input[type="radio"] + label:before {
content: "";
display: inline-block;
width: 14px;
height: 14px;
margin: 0px 8px 0px 0px;
vertical-align: middle;
cursor: pointer;
border-radius: 50%;
background-color: transparent;
border: 2px solid #020202;
transform: translateY(-1px);
cursor: pointer!important;
}
input[type="radio"]:checked + label::before {
background-color: #99ca3c;
border: 2px solid #99ca3c !important;
}
body #page-container #et-boc .contact_form .gform_wrapper .gfield_checkbox input {
vertical-align: top;
width: 17px;
height: 17px;
cursor: pointer;
}
/* Style the checkbox container */
body #page-container .gfield_checkbox {
margin-bottom: 20px; /* Adjust as needed */
}
/* Style the checkbox label */
body #page-container .gfield_checkbox label {
display: inline-block;
margin-bottom: 5px; /* Adjust as needed */
}
/* Hide the default checkbox */
body #page-container input[type="checkbox"] {
display: none;
}
/* Create a custom checkbox */
body #page-container input[type="checkbox"] + label {
position: relative;
padding-left: 30px; /* Adjust as needed */
cursor: pointer;
}
/* Style the custom checkbox */
body #page-container input[type="checkbox"] + label::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 16px; /* Adjust as needed */
height: 16px; /* Adjust as needed */
border: 2px solid #020202; /* Border color */
border-radius: 4px; /* Border radius */
background-color: #fff; /* Background color */
}
/* Style the checkmark when the checkbox is checked */
body #page-container input[type="checkbox"]:checked + label::before {
background-color: #99ca3c;
border-color: #99ca3c;
content: "\4e";
line-height: 1.2em;
font-weight: 700 !important;
font-size: 16px;
color: #fff;
font-family: 'etModules' !important;
}