How to Style Placeholder Text for Form Fields

Overview

Would you like to style placeholder text for your WPForms form fields? 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.

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.

Simply add this CSS to your site. If you need any help on where and how to add custom CSS, please review this tutorial.

By adding the following CSS, we will make all WPForms placeholder text light grey (#aaa):

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

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

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

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

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

.wpforms-container ::placeholder {
   color: #aaa !important;
}

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.

FAQ

Q: Why can’t I style the dropdown options?

A: Dropdown options are styled within each browser by the browser default settings. While you can you custom JavaScript to attempt to style these options, not all browsers will adhere to these settings and still provide their own default styling.