How can I change the text color of the "hint" text within a Hubspot form field (not the user typed text, the hint text such as "First Name"?

Question

This could apply to any page with a form but an example is here: https://www.sevensteprpo.com/contact

The "first name," "email," and other in-line form field hints (not the form labels) are all white. My issue is the inspect tool isn't telling me what's applying the font color there to let me know what to target to change the color. If I right click-> inspect it will show me what I have applied for the form input boxes but the white text is not listed under computed or styles so I'm not sure how to get that information.

When I inspect the form field these are the targets/styles I get:

 .lp-body-form form input[type=email], .lp-body-form form input[type=tel], .lp-body-form form input[type=text], .lp-body-form form select, .lp-body-form form textarea {
        background: transparent;
        border: 0;
        border-bottom: 2px solid hsla(0,0%,100%,.2);
        color: #fff;
        font-family: Source Sans Pro,sans-serif;
        font-size: 18px;
        margin-bottom: 20px;
        padding-bottom: 15px;
        width: 100%;
        }

If I try to change the color away from #fff it doesn't take effect (Even when !important). And changing the color only changes the color for 2 of the hints: "Please select..." and "What best describes..." but not the others like "first name" or "email"

This may be an issue of how the Hubspot form is set up but am struggling to identify what is defining the color for the in-line form field "hints"

Appreciate any help or recommendations on what to check

Answer 1

You can use the ::placeholder selector : https://www.w3schools.com/howto/howto_css_placeholder.asp

EDIT : See this topic to have a cross-browser solution : Changing the color of placeholder text of a select element