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

<input type="email" placeholder="jane@firefly.com">

You can style that text across most browsers with this smattering of vendor-prefixed selectors:

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: pink;
::-moz-placeholder { /* Firefox 19+ */
  color: pink;
:-ms-input-placeholder { /* IE 10+ */
  color: pink;
:-moz-placeholder { /* Firefox 18- */
  color: pink;

Important warning: this syntax is non-standard, thus all the naming craziness. It doesn't appear in the spec at all. :placeholder-shown is standard, and even spec authors seem to think ::placeholder will be the standardized version.

Like any psuedo, you can scope it to specific elements as needed, like:

input[type="email"].big-dog::-webkit-input-placeholder {
  color: orange;


See the Pen Basic Example of an Input Placeholder by CSS-Tricks (@css-tricks) on CodePen.

The difference between :placeholder-shown and ::placeholder

:placeholder-shown is for selecting the input itself when it's placeholder text is being shown. As opposed to ::placeholder which styles the placeholder text.

Here's a diagram:

I found this highly confusing as

  1. the specs only have :placeholder-shown and not ::placeholder
  2. :placeholder-shown can still affect the styling of the placeholder text, since it's a parent element (e.g. font-size).

Note that :placeholder-shown is a pseudo class (it's an element in a particular state) and ::placeholder is a pseudo element (a visible thing that isn't really in the DOM). Distinguishable by single-versus-double colons.

Tab Atkins cleared it up for me via email:

:placeholder-shown, being a pseudo-class, has to select an existing element - it selects the input whenever you're in the placeholder-showing state. The ::placeholder pseudo-element wraps the actual placeholder text.

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 text 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.

Firefox placeholder color

You might notice how in Firefox the color of the placeholder looks faded when compared to other browsers. In the image below, Firefox 43 is shown on the left whilst Chrome 47 is shown on the right:

The Chrome version is ideally the style that we’d like to see everywhere.

This is because, by default, all placeholders in Firefox have an opacity value applied to them, so in order to fix this we need to reset that value:

::-moz-placeholder {
  opacity: 1;

You can see more by testing this demo out in Firefox.

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

We're saying it's supported here even if prefixed.

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

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


  1. User Avatar
    Permalink to comment#


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

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

    • User Avatar
      Permalink to comment#

      Text-align doesn’t supported at this moment.

    • User Avatar
      Permalink to comment#

      You can solve this by:

      input { text-align: right; }
      input:focus { text-align: left }
  2. User Avatar
    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.

    • User Avatar
      Permalink to comment#

      Hi Hakan, I was just struggling with Firefox and your comment solved my problem, thank you very much!


    • User Avatar
      Permalink to comment#

      Oh my God, thank you Håkan! I was just stumped by that as well.

    • User Avatar
      Permalink to comment#

      Thanks a lot!

    • User Avatar
      Davide Gelormini
      Permalink to comment#

      After 3 year you saved my life ahahah thx man

  3. User Avatar
    Permalink to comment#

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

    :-moz-placeholder {
      color: pink;
  4. User Avatar
    Permalink to comment#

    Try this example

  5. User Avatar
    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. User Avatar
    Permalink to comment#

    how can I align input email form to left and placeholder to right in this code:

    <input id="comments-form-email" type="text" name="email" value="" size="22" tabindex="2" placeholder="sample test"/>
    • User Avatar
      Mohit Pilania

      Try this:

      /* webkit solution */
      ::-webkit-input-placeholder { text-align:right; }
      /* mozilla solution - this is for firefox 18+ */
      ::-moz-placeholder { text-align:right; }
      /* mozilla solution - this is for firefox 18- */
      :-moz-placeholder { text-align:right; }
    • User Avatar
      Permalink to comment#

      deffine of placeholder

  7. User Avatar
    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. User Avatar
    boyan todorov
    Permalink to comment#

    text-indent doesn’t supported in Chrome mobile

  9. User Avatar
    Permalink to comment#

    placeholder + text-indent doesn’t work in android browser (4.2), who have a solution?

  10. User Avatar
    Senthil kumar

    placeholder text issue in IE browser, how can i solve that?

    am already use this below code:


    but is’t work in my IE browser

  11. User Avatar
    Senthil kumar

    @font-face is not work in IE9 browser, how can i solve that?

    am already using this given below code to my project:

    @font-face{font-family:”OpenSans-Regular”; src:url(‘../new_font/OpenSans-Regular.ttf’) format(‘truetype’); src:url(‘../new_font/OpenSans-Regular.ttf?#iefix’) format(‘truetype’);}

  12. User Avatar

    How to centre align of input-box watermark in safari browser 5.1.7?

  13. User Avatar
    Devon Mather
    Permalink to comment#

    This doesn’t appear to work within Chrome on iOS?

  14. User Avatar
    Mihajlo Lazar
    Permalink to comment#

    Use CSS direction property to move placeholder content to the right.

  15. User Avatar
    Permalink to comment#

    Thanks a lot.

  16. User Avatar
    Permalink to comment#

    the “testing this demo out in Firefox.” link at the end is broken

  17. User Avatar
    Permalink to comment#

    Great post, keep the good work. Thanks!

  18. User Avatar
    Permalink to comment#

    Is there a specific place I need to add this within in my javascript?

  19. User Avatar
    Permalink to comment#

    Hi Chris,
    Looks like typo — I had to put the dash:
    input[type="email"].big-dog::-webkit-input-placeholder {
    color: orange;

    Also the Codepen link does not appear to have a working example.

    For people asking about old IE, you have to use a script instead of this CSS.

  20. User Avatar
    Aaron Gray
    Permalink to comment#

    Looks like Desktop Chrome, Desktop Firefox, iOS Safari, and IE10+ now support simply ::placeholder and don’t require the prefixes anymore. :)

  21. User Avatar
    Permalink to comment#

    Please tell me how to change placeholder color of

  22. User Avatar

    Hi, this is very helpful, but I am still running into an issue with the placeholder text looking “washed out” on Safari. Here’s what I have:

    #ysw_search_box_id::-moz-placeholder, #ysw_search_box_id:-ms-input-placeholder, #ysw_search_box_id:-moz-placeholder {
    color: #191919; opacity: 1; font-weight: bold; font-family: arial; font-size: 14px;

    Do I just have the wrong syntax? Sorry, I am not a techie – just starting to learn!!


  23. User Avatar

    When the placeholder’s font-size is different to input font-size, the placeholder is missaligned vertically in Chrome (in Firefox works fine) -> https://jsfiddle.net/pmyd087f/

  24. User Avatar
    Permalink to comment#

    can anyone tell me how to align placeholder in left top

  25. User Avatar
    Permalink to comment#

    This page needs an update, because for Edge you will need ::-ms-input-placeholder (with a double colon)

  26. User Avatar
    Mathieu Gagnon
    Permalink to comment#

    So useful! Thank you!

  27. User Avatar
    Permalink to comment#

    thank you my friend…

  28. User Avatar
    Permalink to comment#

    Otherwise the declaration will have no effect. Check this example

  29. User Avatar
    Permalink to comment#

    For me, i’ve had to put “input” in front of all, otherwise it doesn’t work.

  30. User Avatar
    Abdul Haseeb
    Permalink to comment#

    How to align placeholder in HTML not text.

  31. User Avatar
    Permalink to comment#

    Good Post. Include style for Microsoft Edge browser also.

    input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    input:-moz-placeholder { /* Firefox 18- */
    input::-moz-placeholder { /* Firefox 19+ */
    input:-ms-input-placeholder { /* IE */
    input::-ms-input-placeholder { /* IE Edge */
    • User Avatar
      Adam Clark
      Permalink to comment#

      Nice. But would it be okay to remove the element qualifier from these declarations? If not they’ll only be applied to input tags and not, for example, textarea tags.

  32. User Avatar
    Permalink to comment#

    i love this selector, make my input style more cool

Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.