Each field on your form can have an individual id assigned to it by you.
This ID can then be referenced in CSS.
So if you inserted a text label and field like this:
<p> FirstName </p>
You could add an ID
<p ID=”FName” > FirstName </p>
Then you can go to your child theme Custom CSS and set attributes for the field:
#FName{
font-size: px; /* %, px or em */
color: #ffffff; /* Add a Hex Color */
font-style: ; /* italic, normal or oblique */
font-variant: ; /* small-caps */
font-weight: ;
}
If you want to affect more than one field at a time but not all fields on your site, you can add a class instead of an ID. So each field may have a class assigned to it:
<p class=”myclass”> First Name </p>
Then your CSS custom code would use a . instead of a #
.myclass {
font-size: px; /* %, px or em */
color: #ffffff; /* Add a Hex Color */
font-style: ; /* italic, normal or oblique */
font-variant: ; /* small-caps */
font-weight: ;
}
So for some fields you may wish to set specific configuration whilst others all want to look the same.
I’m a novice but this works for me, I’m sure an adult will come along shortly and put me on the naughty step.
I use the Avada theme and often find I need to put !Important on the end of my CSS to ensure that it takes precedence, for-example, font-size:10px!important;
All the best,
Sam