Skip to main content
Print

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;
}


Table of Contents