How to Style the Placeholder Text

Are you wanting to stylize your placeholder text? Is your site’s CSS messing up your optin’s placeholder field? This guide will show you the CSS you can use to style your optin’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 Optin Placeholders

To apply styles only to specific optins you can modify the CSS Selector to target your unique optin(s). In the following you would replace OPTIN_SLUG with the unique slug for your optin, 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 optin’s placeholder text to be a dark gray (the HEX value being #333333). If your optin’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 optin 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 optin as expected?

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