How to Style Placeholder Text for Form Fields

Overview

Would you like to style your form placeholder text? With some custom CSS, we can easily achieve this. In the article below we’ll walk you through the basic CSS needed to style the placeholder text for your form fields..

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.

Add your placeholder text to your form field

Setup

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.

By adding 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 will automatically apply a lower opacity to all form field placeholder’s, making it more transparent than other browsers.

That is already addressed in the above CSS by setting the opacity for Firefox-specific CSS to opacity: 1;

And that’s all you need to style the placeholder text. Would you like to change the confirmation message styling using CSS? In our tutorial, How to Remove Confirmation Message Box Styling, we’ll show you how to change this styling.