Modify CSS for the label of one field

Hello @ratamatcat,

I trust you’re doing well!

Every field can be given a custom CSS ID. Please edit a field, and open the Styling tab. Add CSS ID to Additional CSS Classes field. Please see this screenshot:
https://take.ms/dOPNL

Use this custom ID to apply any CSS properties.

Hope this helps!

Kind regards,
Nastia

Hi Nastia!

I tried it before as you outlined, however the CSS I entered does not modify the label itself.

I have a Forminator HTML field as below:

Label: My Label Text
Editor content: My Editor Content Text

Then in Appearance > Custom CSS for the form I enter:

.forminator-label-sizegrp {
color: #8e44ad;
}

and also try instead:

.label-sizegrp {
color: #8e44ad;
}

Then of course place the css selector(s) into the Styling > Additional CSS Classes for the html field.

This CSS works on the front end form but the color is applied to the text I have entered in the Editor content for the html field. How can I modify the actual label (‘My Label Text’) for the field?

Sorry if this is a basic query, but css can sometimes be quite tricky!

thanks again,

Hello @ratamatcat

After adding the additional class for the HTML field as “my-html”:
https://monosnap.com/file/3BX3mEsI0xef6ZdcXPioNUz5iWXMeX
https://monosnap.com/file/GI74W8RdnQuXvDwkPC3wKi9x62i3JU

You should enable the Custom CSS for this form and insert the following CSS rule in there: https://monosnap.com/file/AVnDBV2VrzuPHDsXWb2399vQ8qVGdj

.my-html .forminator-label {
  color: red;
}

Warm regards,
Dimitris

Thanks Dimitris,

Now I can have labels on every field in the form back-end because I can hide the label on the front end in some situations,

.removeItem .forminator-label {
display: none;
}

I see how you’ve done that now by checking Googles inspect.