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!