How to Style the Placeholder Text

Are you wanting to stylize your placeholder text? Is your site’s CSS messing up your campaign’s placeholder field? This guide will show you the CSS you can use to style your campaign’s placeholder text.

Style ALL Placeholder Text on Your Site

If you want to style the placeholder text for all of your site, then you could paste the above code in your style.css file. Depending on other styles being applied, you may want to add the !important tag. So a line would look like:

::-webkit-input-placeholder { color: #333 !important; }

Style Just OptinMonster Campaign Placeholders

To apply styles only to specific optins you can modify the CSS Selector to target your unique campaign(s). In the following you would replace OPTIN_SLUG with the unique slug for your campaign, and update the color to suit your wishes:

Therefore, let’s say that your website’s CSS is making your placeholder text white, but you want your campaign’s placeholder text to be a dark gray (the HEX value being #333333). If your campaign’s slug is a3yinrmpy7senzap, then your CSS would be:

You can style other aspects of your placeholder, however we would encourage you to keep styles minimal when it comes to modifying the default look of placeholder text — like color, font-style, and font-variant — so that it maintains professionalism and readability.

If it doesn’t look like your styles are applying, you may need the !important tag added. In that case, your campaign would look like this: