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.

::-webkit-input-placeholder {
  color: red;
}
:-moz-placeholder {/*Firefox 18-*/
  color: red;  
}
::-moz-placeholder {/*Firefox 19+*/
  color: red;  
}
:-ms-input-placeholder {  
  color: red;  
}

This may appear like duplications but unfortunately there is no DRY-er (Don’t Repeat Yourself) way to do this.

The following will not work:

::-webkit-input-placeholder,
:-moz-placeholder,
::-moz-placeholder,
:-ms-input-placeholder {
  color: red;  
}

This is because any browser must be able to “understand” each of the selectors in the comma-separated series for the styles within the braces to be applied.

Use Sass to style placeholders

One solution to this repetitive CSS is to use a Sass mixin. This is the one that I use in 99% of my projects:

@mixin input-placeholder {
  ::-webkit-input-placeholder {
    @content;
  }
  :-moz-placeholder {/* Firefox 18- */
    @content;
  }
  ::-moz-placeholder {/* Firefox 19+ */
    @content;
  }
  :-ms-input-placeholder {  
    @content;
  }
}

/* usage */

@include input-placeholder {
  color: red;
}

This allows me to set the styles for placeholders in all browsers with a single Sass @include which helps keep the code shorter and more maintainable.

Be careful of specificity when styling placeholders

In the IE browser, setting styles on an input can override the styles set for the placeholder text.

:-ms-input-placeholder {
  color: red;
}
input[type="text"] { 
  color: blue; /* placeholder text will be blue in IE */
}

Ensure IE placeholder styles have higher specificity so they appear as expected. This could even be a case for using !important but always be careful if using that powerful tool.

Be aware of opacity of placeholders

In Firefox, placeholder text has a default opacity of around 0.5 so setting color: red on the placeholder will result in a muted color unless you also set opacity: 1.

Even if you’re using Normalize.css this isn’t reset for you. If fully opaque placeholders are key to your project, keep this tip in mind!