AtoZ CSS Quick Tip: Placeholder Text

This article is a part of our AtoZ CSS Series. You can find other entries to the series here.
You can view the full transcript and screencast for its corresponding video, Pseudo Elements, here.

Welcome to our AtoZ CSS series! In this series, I’ll be exploring different CSS values (and properties) each beginning with a different letter of the alphabet. We know that sometimes screencasts are just not enough, so in this article, we’ve added a new quick tip about styling placeholder text.

P is for Placeholder Text

Pseudo elements :before and :after are great for building complex design features without cluttering the markup with non-semantic elements. Other pseudo elements like :first-line and :first-letter give us access to styling parts of elements that aren’t found marked up in the HTML document.

We looked at many of these in the Pseudo Elements screencast but one pseudo element we didn’t look at was for styling placeholder text. Let’s fix that.

Selecting input placeholders

First, let’s imagine the following HTML:

<input class="name-field" type="text" placeholder="Enter your name">

We could set the color of the input text to red as follows:

.name-field {
color: red;
}

We could also select and style the input from its placeholder attribute:

input[placeholder="Enter your name"] {
color: red;
}

But this still styles the text of any user input typed into the field, rather than styling the appearance of the placeholder text itself. To do that we need a series of vendor prefixed selectors for the placeholder pseudo element.