1. Home
  2. Snippets
  3. Style Placeholder Text for Form Fields

Style Placeholder Text for Form Fields

Heads up!

This article contains CSS code and is intended for developers. We offer this code as a courtesy, but don't provide support for code customizations or 3rd party development.

Dismiss

Placeholder text can be useful for providing temporary information within a field. Unlike default text, which behaves just like user-entered text, placeholder text will disappear when a user clicks into a field.

Placeholder text in the WPForms form builder

Styling placeholder text requires several different selectors. Since placeholder styling isn’t yet part of standard, cross-browser CSS, each selector has its own vendor (browser-specific) prefix. This is needed to ensure that these styles are applied to as many different browser types and versions as possible. So even though the styles below may appear repetitive, it’s important to include all of them.

The following CSS will make all WPForms placeholder text light grey (#aaa):

.wpforms-container ::-webkit-input-placeholder { /* Chrome and Safari */
   color: #aaa;
}

.wpforms-container :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color: #aaa;
   opacity: 1;
}

.wpforms-container ::-moz-placeholder { /* Mozilla Firefox 19+ */
   color: #aaa;
   opacity: 1;
}

.wpforms-container :-ms-input-placeholder { /* Internet Explorer 10-11 */
   color: #aaa;
}

.wpforms-container ::-ms-input-placeholder { /* Microsoft Edge */
   color: #aaa;
}

Firefox automatically applies a lower opacity to all placeholder text, making it more transparent than other browsers. That’s addressed in the above CSS by setting the opacity for Firefox-specific CSS to 1.

View custom styles for placeholder text in WPForms

Updated on October 17, 2017

Was this article helpful?