CSS for Background Color: Field Label Not Included

Get Help
,
1

Here’s my test form.

I created this CSS snippet; any thoughts on why the Field Label is sometimes not included within the padding? I’m using the Form Items example; wondering if I need to target each field type?

body #gform_wrapper_5 .gform_body .gform_fields .gfield {border: 1px solid black; background-color: lightsteelblue; padding: 20px}
2

Try this. I checked out your webpage. It looks as though your forms are using some legacy markup. The snippet below should work. If not, feel free to respond to this.

.gform_wrapper.gravity-theme legend {border: 1px solid black; background-color: lightsteelblue; padding: 20px}
3

I appreciate the help, but that didn’t work; seems only to be impacting the background of the field label, not the entire field. Here’s a screenshot so you can see; I’m going to change my CSS back to what I started with.

Screen Shot 2021-06-27 at 5.24.41 PM

Also, I double checked and I don’t have any legacy markup that I can find, and I have “Enable Legacy markup” unchecked in settings. Where else would there be legacy markup?

4

There are “legends” and there are “labels” and I suspect that your Tuition one is a label instead of a legend.

5

Thanks. I’ve researched this some and understand the concept, but have no idea where I would make a change.

Additional information: I’m using GF v2.5.6. The forms are brand new, there is no legacy code, “enable legacy markup” is unchecked. There is no additional code in Additional CSS or in my functions.php file.

Thanks.

6

Instead of

.gform_wrapper.gravity-theme legend {border: 1px solid black; background-color: lightsteelblue; padding: 20px}

use

.gform_wrapper.gravity-theme legend,  .gform_wrapper.gravity-theme label  {border: 1px solid black; background-color: lightsteelblue; padding: 20px}

or something like that.

Or you could target it very specifically with
#field_8_5 > label {border: 1px solid black; background-color: lightsteelblue; padding: 20px}

Typical CSS stuff.