Change Background Color of Completed Field

[AeroStar (Jonathan Tidwell)]

Good Day!

Is there any way we can change the background color of the field(s) that have been properly completed prior to form submission – and/or – highlight with a different background color the field(s) that have been properly completed after clicking the submit button, but before the entire form has been completed?

Details: Screenshot by Lightshot

Note: The above is different from changing the autofill background color.

Thank you,

Jonathan

[faisalahammad]

Hi Jonathan,

I found this a bit tricky, but it’s easy to style the error/invalid field using a simple CSS code block.

body .gform_wrapper .gform_body .gform_fields .gfield_error input {
  background-color: red !important;
  color: #fff !important;
}

Output:

You can find more CSS selectors in the following documentation.

Validation Errors CSS Selectors

[AeroStar (Jonathan Tidwell)]

Hi Faisal,

Thanks for the tip.

Actually, I’m looking for a CSS Rule that will highlight form fields that have been properly completed - prior or after clicking the Submit button. Makes sense?

Again, thank you!