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.

Important: This guide assumes you’re already familiar with our Custom CSS tool.

How to Target the Placeholder Pseudo Class

Each web browser is different when it comes to targeting a Pseudo Class. To target the Placeholder class, you would generally use this format:

/* all */
::-webkit-input-placeholder { color: #333; } /* Chrome/Opera/Safari */
::-moz-placeholder { color: #333; } /* firefox 19+ */
:-ms-input-placeholder { color: #333; } /* ie */
:-moz-placeholder { color: #333; } /*below firefox 19 */
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:

/* all */
html div#om-OPTIN_SLUG ::-webkit-input-placeholder { color: #333; } /* Chrome/Opera/Safari */
html div#om-OPTIN_SLUG ::-moz-placeholder { color: #333; } /* firefox 19+ */
html div#om-OPTIN_SLUG :-ms-input-placeholder { color: #333; } /* ie */
html div#om-OPTIN_SLUG :-moz-placeholder { color: #333; } /* below firefox 19 */

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:

/* Ensure placeholder text is shown. */
html div#om-a3yinrmpy7senzap ::-webkit-input-placeholder { color: #333; } /* Chrome/Opera/Safari */
html div#om-a3yinrmpy7senzap ::-moz-placeholder { color: #333; } /* firefox 19+ */
html div#om-a3yinrmpy7senzap :-ms-input-placeholder { color: #333; } /* ie */
html div#om-a3yinrmpy7senzap :-moz-placeholder { color: #333; } /*below firefox 19 */

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:

/* Ensure placeholder text is shown. */
html div#om-a3yinrmpy7senzap ::-webkit-input-placeholder { color: #333 !important; } /* Chrome/Opera/Safari */
html div#om-a3yinrmpy7senzap ::-moz-placeholder { color: #333 !important; } /* firefox 19+ */
html div#om-a3yinrmpy7senzap :-ms-input-placeholder { color: #333 !important; } /* ie */
html div#om-a3yinrmpy7senzap :-moz-placeholder { color: #333 !important; } /*below firefox 19 */
Congratulations, you’ve successfully styled your placeholder text!

FAQs

Q: Why aren’t the styles applying to my campaign as expected?

A: Be sure to check that there is a space between the campaign slug and the first colon in the CSS Selectors. This space is mandatory to properly target the placeholder text.