How to Style the Placeholder Text

Placeholder text is the default text shown in form fields to indicate what information should be entered. You can use CSS to customize the style of your placeholder text in OptinMonster.

In this article, we’ll provide some examples of using CSS to style placeholder text.

Before You Start

Here are some things to know before you begin:

  • This guide assumes you’re already familiar with our Custom CSS tool.
  • Styling your placeholder text with CSS typically isn’t required. It is optional if you wish to change the default styling.
  • 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.

Examples

The following examples will help you style the Placeholder text using CSS:

Style Just OptinMonster Campaign Placeholders
html div#om-{{id}} ::-webkit-input-placeholder { color: #333 !important; } /* Chrome/Opera/Safari */
html div#om-{{id}} ::-moz-placeholder { color: #333 !important; } /* firefox 19+ */
html div#om-{{id}} :-ms-input-placeholder { color: #333 !important; } /* ie */
html div#om-{{id}} :-moz-placeholder { color: #333 !important; } /* below firefox 19 */
Style ALL Placeholder Text on Your Website

To change the styling of all placeholder text on your website and in your campaigns, we recommend adding the CSS directly to your website rather than in any individual OptinMonster campaign.

::-webkit-input-placeholder { color: #333 !important; } /* Chrome/Opera/Safari */
::-moz-placeholder { color: #333 !important; } /* firefox 19+ */
:-ms-input-placeholder { color: #333 !important; } /* ie */
:-moz-placeholder { color: #333 !important; } /*below firefox 19 */