The CSS3 Placeholder Pseudo-element

blog_css

An HTML5 feature that had the web community abuzz with excitement a couple of years ago was the placeholder attribute for displaying placeholder text in input fields. Now that it’s widely supported by modern browsers, there is a lot more we can do with this useful feature, like customize the text’s appearance.

The latest ::input-placeholder CSS pseudo-element gives us a standards-compliant way to style placeholder text, regardless of an input field’s default styles.

Styling Placeholder Text

A browser applies predefined styles to text displayed via the placeholder attribute. By default, the text is a light gray, which can be difficult to read depending on the context.

There was a bit of dashed hope when developers discovered that there were no CSS styling options available for placeholders –– it was the UA styles or nothing. The good news is that the new ::input-placeholder pseudo-element allows us to break out of the UA norm by offering more styling flexibility.

For example, let’s use the following placeholder and change its color and text case:

<input type="text" placeholder="I'm placeholder text!">

We’ll then create a CSS rule using the new pseudo-element:

input::-webkit-input-placeholder {
   color: rgba(0,5,143,.5);
   text-transform: uppercase;
}

::input-placeholder has decent implementation, but for now we’ll need to use vendor prefixes. We are also unable to combine the prefixed selectors into one rule. They each need to be defined separately, otherwise the entire rule will be ignored by the browser.

input::-webkit-input-placeholder {
	color: rgba(0,5,143,.5);
	text-transform: uppercase;
}
input::-moz-placeholder {
	color: rgba(0,5,143,.5);
	text-transform: uppercase;
}
input:-moz-placeholder {   /* Older versions of Firefox */
	color: rgba(0,5,143,.5);
	text-transform: uppercase;
}
input:-ms-input-placeholder { 
	color: rgba(0,5,143,.5);
	text-transform: uppercase;
}

Check it out in CodePen.

The Placeholder Attribute Selector

Additionally, we can target input fields entirely based on whether or not they have a placeholder attribute with the [placeholder] attribute selector:

input[placeholder] {
   font-weight: bold;
   border-color: blue;
}

Now, every input field that has a placeholder attribute will have a bold font weight and blue border.

Which properties can we use?

Not all CSS properties are supported in a ::input-placeholder rule. In fact, only a handful are, the most useful ones being:

color
font-size
font-style
font-weight
letter-spacing
line-height
padding
text-align
text-decoration

It’s important to keep in mind that placeholder styles will not resize an input field and will not affect its box model. A line height and padding, for example, will move a placeholder,  but too much padding and line height will display the text outside the content area of a field obscuring some parts. The same occurs with font sizes.

input::-webkit-input-placeholder {
   padding-top: 8px;
}
Placeholder text is cut off

Placeholder text is cut off

Browser Support

The ::input-placeholder pseudo-element is currently supported in Firefox 4+, Chrome 4+, Safari 5+, Opera 11.6 and IE10. Firefox supports both a pseudo-element and a pseudo-class for older versions of Firefox.

Form interaction is an integral part of just about everything we do on the web. So even small enhancement features like this help us make great strides in developing powerful user experiences.

To learn more about new CSS features, take a look at my latest CSS Foundations Deep Dive.

Free Workshops

Watch one of our expert, full-length teaching videos. Choose from either HTML, CSS or Wordpress.

Start learning

Guil Hernandez

Guil is the front-end design teacher at Treehouse. You can follow Guil on Twitter at @guilh.

Comments

12 comments on “The CSS3 Placeholder Pseudo-element

  1. I’ve always got excited when I read and understand a tutorial. Your style of writing and example code is really excellent. Explained in easy to understand terms. This article was fantastic.

    Then I encounter what seems to be a road block for me, Browser support.

    Today most of my clients require that their website, thus by projection their template and CSS styling, work across at least five Browsers, Chrome, Firefox, Opera, Safari, and finally IE ( the crappiest of the lot but free with the OS ). Otherwise they do not pay me and that hurts.

    When I read the CSS technique described above I could not quite figure out whether the technique of Pseudo Placeholders worked across all these five Browsers, and degraded sweetly in older versions,

    Perhaps a small table indicating Browser support and degradation would have made this article sublime.

    • Thanks for reading, Ivan.

      I completely understand what you mean –– everything hinges on browser support.
      Fortunately, the placeholder attribute has decent support (except IE9 down). Take a look at this support table: http://caniuse.com/input-placeholder

      You can use http://modernizr.com/ to detect support for the placeholder attribute, then provide a fallback solution for those browsers that do not support it. There are also simple jQuery plugins for this: http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html.

      If you are using the CSS pseudo-element, Firefox 4+, Chrome 4+, Safari 5+, Opera 11.6, and IE10 have it covered. But there are currently 2 implementations of this feature: a pseudo-element and a pseudo-class (for FF 4 – 18).

      ::-webkit-input-placeholder { /* WebKit browsers */
      color: blue;
      }
      :-moz-placeholder { /* Mozilla Firefox 4 - 18 */
      color: blue;
      }
      ::-moz-placeholder { /* Mozilla Firefox 19+ */
      color: blue;
      }
      :-ms-input-placeholder { /* Internet Explorer 10+ */
      color: blue;
      }

      I wouldn’t worry too much about the older browsers that do not support ::input-placeholder, as it’s just an enhancement feature. Just make sure that you have enough contrast between the placeholder text and input field.

  2. Thanks Guil! This was the only element I could find that resolved my issue for Firefox 20. Surprised others have not shared this. Great Share!

  3. It looks like the opacity property is also supported. In Firefox 20, the default ::-moz-placeholder style has opacity at around 50%.

  4. It looks like the opacity property is also supported. In Firefox 20, the
    default ::-moz-placeholder style has opacity at around 50%.