Grow your CSS skills. Land your dream job.

::placeholder

Last updated on:

The ::placeholder pseudo element (or a pseudo class, in some cases) allows you to style the placeholder of a form element. As in, the text set with the placeholder attribute:

<input type="email" placeholder="jane@firefly.com">
::-webkit-input-placeholder {
  color: pink;
}
::-moz-placeholder { /* Firefox 19+ */
  color: pink;
}
:-ms-input-placeholder {
  color: pink;
}
:-moz-placeholder { /* Firefox 18- */
  color: pink;
}

Important warning: this syntax is non-standard, and in flux. It will change in the near future, so don’t rely on it too heavily.

Example

Element or Class?

This functionality is not standardized. That means that every browser has a different idea on how it should work.

Firefox originally implemented this as a pseudo class, but changed it for a bunch of reasons. To make a long story short, you can't do as much with a pseudo class.

For instance, if you want to change the color of the test when the input is focused. You would use a selector like input:focus::placeholder, which you wouldn't be able to do with a pseudo class (they don’t stack the same way).

IE10 supports this as a pseudo class, rather than an element. Everyone else has implemented a pseudo element.

Supported Styles

The pseudo element supports styling of these properties:

  • font properties
  • color
  • background properties
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • text-indent
  • opacity

The pseudo class supports most (if not all) of these properties as well, but isn't as flexible for the reasons outlined above.

Other Resources

Browser Support

Chrome Safari Firefox Opera IE Android iOS
4+ 5+ 4+ None 10+ Any Any

Firefox supports a pseudo class up until version 18. Version 19+ support the pseudo element, rather than the class.

Comments

  1. ahmad
    Permalink to comment#

    input{text-align:left}

    ::-moz-placeholder, :-moz-placeholder {text-align:right !important;}

    But “text-align:right” does not work!

  2. Håkan Save Hansson
    Permalink to comment#

    Some browsers (Firefox tested) use opacity for placeholders. So, if you want to control the color with the color property alone, also remember to set opacity: 1.

  3. Ruslan
    Permalink to comment#

    also it’s important to use each declaration as a separated declaration, like in this article, and not like this:

    ::-webkit-input-placeholder, 
    ::-moz-placeholder,
    :-ms-input-placeholder,
    :-moz-placeholder {
      color: pink;
    }
    
  4. Ruslan
    Permalink to comment#

    Try this example

  5. sakthivel
    Permalink to comment#

    My question is how to center align the placeholder text in text box for safari.. I tried in mobile as well as desktop browser also.. It s left aligned only

    Pls let me know if any one knws

  6. Permalink to comment#

    how can I align input email form to left and palceholder to right in this code:
    <input id="comments-form-email" type="text" name="email" value="" size="22" tabindex="2" placeholder="sample test"/>

  7. Paul Connolly

    Anyone experienced an issue in older versions of Opera that the placeholder aligns to the right???

    Is there a way of fixing this issue if ‘text-align’ isn’t supported?

  8. boyan todorov
    Permalink to comment#

    text-indent doesn’t supported in Chrome mobile

Leave a Comment

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".