AtoZ CSS Quick Tip: 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:

[code language="html"]
<input class="name-field" type="text" placeholder="Enter your name">
[/code]

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

[code language="css"]
.name-field {
color: red;
}
[/code]

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

[code language="css"]
input[placeholder="Enter your name"] {
color: red;
}
[/code]

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.

Continue reading %AtoZ CSS Quick Tip: Placeholder Text%

by Guy Routledge via SitePoint