Gravity Form checkbox

[texaskiwi13]

Hi team,

I’m working on a form for a new site - https://mumstrong.co.nz/- and I’ve tried alot of different things to try to style the checkbox fields on my form and nothing has worked. Can you please help me?

What I’m trying to do is:

1. change the text styling on the field label. Ie. the color, font family, etc. But I can’t seem to target it to get it to work

2. change the color of the checkmark when you select something AND change or get rid of the blue glow around the box when you select something

3. make my choices into two columns so that my form isn’t so tall

Can you please assist?

Here is the CSS I have on my form so far, but nothing I’ve tried has worked to achieve the above.

/* Hide required field legend in Gravity Forms */
.gform_wrapper .gform_required_legend {
display: none;
}

/* Remove the box-shadow from text input fields in Gravity Forms */
.gform_wrapper input[type=“text”],
.gform_wrapper input[type=“email”],
.gform_wrapper input[type=“tel”],
.gform_wrapper textarea {
box-shadow: none !important;
border: none !important;
background-color: #e3cccc !important;

}

/* Change the color of the input text in Gravity Forms */
.gform_wrapper input[type=“text”],
.gform_wrapper input[type=“tel”],
.gform_wrapper input[type=“email”],
.gform_wrapper textarea,
.gform_wrapper select {
color: #c0796d !important;
font-size: 16px !important;
}

/* Style the submit button in Gravity Forms */
.gform_wrapper input[type=“submit”] {
background-color: #a5402e !important;
color: #f3e3e1 !important;
font-size: 18px !important;
letter-spacing: 1.5px !important;
text-shadow: none !important;
border-radius: 2px !important;
padding: 10px 10px !important;
font-family: raleway, sans-serif !important;
font-weight: 700 !important;
font-style: normal !important;
text-transform: uppercase !important;

}

/* Hover effect for the submit button */
.gform_wrapper input[type=“submit”]:hover {
background-color: #843325 !important;
color: #f3e3e1 !important;
font-size: 18px !important;
letter-spacing: 1.5px !important;
text-shadow: none !important;
border-radius: 2px !important;
padding: 10px 10px !important;
font-family: raleway, sans-serif !important;
font-weight: 700 !important;
font-style: normal !important;
text-transform: uppercase !important;
transform: translate(0px, -1px) !important;

}

/* Change the color of the checkbox text and field label */
body .gform_wrapper .gfield_checkbox label,
body .gform_wrapper .gfield_checkbox .gfield_label {
color: #a5402e !important;
}

/* Style the checkboxes */
.gform_wrapper .gfield_checkbox input[type=“checkbox”] {
border: none !important;
background-color: #e3cccc !important;

}

Thanks so much,
Ashley

[tristup]

Hi Ashley,

Thanks for reaching out.
I have checked the given URL and found that the custom CSS code is working fine and styles are showing in the form. If you are still not able to see it, I would suggest you check once by clearing all types of cache including the System Cache from Cornerstone > Settings > System > Clear System Cache, and check in the incognito/private mode of the browser.

Thanks

[texaskiwi13]

Thanks Tristrup, but you didn’t actually read my message or respond to the three questions I’ve posted. Luckily I’ve been able to figure it out with help from Gravity Forms.

[tristup]

Hi Ashley,

Glad to know that you are able to figure it out.

Thanks