How to modify placeholder text color in HubSpot form inputs using CSS?

Other Questions HubSpot
1

I’m working on a contact form and having trouble changing the placeholder text color. The placeholders like “Your Name” and “Email Address” appear in white text, but I can’t figure out what CSS is controlling this color.

When I use developer tools to inspect the form fields, I can see the styling for the input elements themselves, but the placeholder text color doesn’t show up in the computed styles. Here’s what I currently have:

.contact-form form input[type=text], 
.contact-form form input[type=email], 
.contact-form form input[type=phone], 
.contact-form form select, 
.contact-form form textarea {
    background: rgba(0,0,0,0);
    border: none;
    border-bottom: 2px solid rgba(255,255,255,0.2);
    color: #ffffff;
    font-family: Arial, sans-serif;
    font-size: 16px;
    margin-bottom: 15px;
    padding-bottom: 10px;
    width: 100%;
}

When I try to change the color property, it only affects some placeholders like dropdown options but not the text input placeholders. I’ve tried using !important but it doesn’t work for all fields.

Any suggestions on what CSS selectors I should target to change the placeholder text color across all form fields?

2

::placeholder is the right approach, but you need more specific selectors since HubSpot forms are tricky. Target the HubSpot classes directly:

.hs-form-field input::placeholder,
.hs-form-field textarea::placeholder {
    color: rgba(255, 255, 255, 0.7) !important;
}

HubSpot’s default styles are aggressive, so !important is usually needed. Also check if your form container has conflicting CSS inheritance overriding the placeholder styles. Sometimes it’s not the selector but competing stylesheets loading after yours.

3

use the ::placeholder pseudo-element selector: .contact-form form input::placeholder, .contact-form form textarea::placeholder { color: #your-color-here; } might need browser prefixes like ::-webkit-input-placeholder for older browsers, but ::placeholder works fine now.