HTML5 Placeholder Styling with CSS

Discussion

1. Christoph Pojer

   PowerTools! has a fallback for older browsers if you want to use the placeholder property: http://cpojer.net/PowerTools
2. Nathan Smith

   Not to be all “me too” in a blog comment, but I’d also suggest checking out this Formalize CSS/JS demo I put together…

   http://host.sonspring.com/formalize/
3. Rudie Dirkx

   If your has a different line-height (let’s say 20px with a 12px font-size), the actual value will display correctly in Googel Chrome (10.0.612.3 dev), but the placeholder won’t. Apparently (?) the line-height isn’t used for the placeholder (?). In Firefox (4b7) this works just fine.
4. raymond taraversara

   this is awesome
   hope you can give me hints

   thanks
5. king jeremiah

   Something about this page is working my laptop harder than flash!
6. John Catterfeld

   David, thanks for your tutorial, but you’ve mad a slight error with your mozilla code in your demo; the individual styles for mozilla must have only one colon, not two, like so:

   #field2:-moz-placeholder {}
   

   Also not all the values you specify work in Chrome, specifically background, text-transform or text-decoration.

   Do you know if these are deliberately unsupported by Chrome?
• David Walsh

  I’m only using one colon above. Am I missing something?
• John Catterfeld

  Hi David, I meant in your demo page – http://davidwalsh.name/dw-content/placeholder-style.php
7. John Catterfeld

   ^ I meant *unsupported* of course…
8. Ted Roche

   David:

   Following up on John Catterfeld’s comment: the general declaration for Mozilla correctly using a single colon, but the field-by-field selectors use a double-colon and are ignored: I see all red placeholders in FireFox4.
9. Allen Harper

   Brilliant… just what I was looking for. Thanks!
10. gen

    code is here:
    

    Enter the username

11. Tobin

    Great information. I’m wondering where you got the information that IE10 would not support placeholder at all. Can you confirm this and cite a source? Thanks in advance
• David Walsh

  It appears that Microsoft will now be supporting IE10 (http://msdn.microsoft.com/en-us/ie/hh272905). I’ll update the post.
12. Paito Anderson

    For Firefox 7 you will want to drop the double colon and just use a single colon after input.

    Like this:

    #field2:-moz-placeholder { color:#00f; }
    #field3:-moz-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
    #field4:-moz-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }
    
13. Pete

    ::-webkit-input-placeholder 	{ text-align: center; }
    

    align center doesn’t seem to have an effect on OSX Webkit, but works great on Windows Webkit… thoughts?
14. Matt Willett

    Seems that bundling webkit and moz properties like…

    .item::-webkit-input-placeholder, .item:-moz-placeholder { color: #333333; }

    …does not work. They have to be called individually, I wonder why that is?
• Scott Rickman

  Hi Matt, you cannot comma separate the selectors because once a browser finds a selector that it doesn’t understand it ignores the whole block of selectors.
15. brothercake

    The variation in colon syntax is because webkit and mozilla have different ideas about what the placeholder text actually is.

    Mozilla considers it to be merely a different interactive state, so it defines a pseudo-class that address that difference; hence the single-colon syntax.

    Webkit consider it to be a separate pseudo-element, so it defines a pseudo-element to address a different piece of text; hence the double-colon syntax. So you can tweak the positional difference between the placeholder text and value simply by tweaking the padding or line-height using that pseudo-element selector:

    input[type="text"]
    {
        padding:4px;
    }
    
    input[type="text"]::-webkit-input-placeholder  
    {
        padding-top:5px;
    }

    Or whatever.
16. Brunis

    @Brothercake, I don’t think Matt was confused about the colons, but the fact that you can’t comma seperate the selectors into one rule.
17. Nathan

    Public test: http://newilk.com/testing/Placeholder_styling

    As of IE10 preview, Internet Explorer is the only browser which supports all the following attributes (listed here http://blog.ajcw.com/2011/02/styling-the-html5-placeholder/):

    Background color
    Border
    Color
    Font size
    Font style
    Font weight
    Letter spacing
    Line height
    Padding
    Text align
    Text decoration
    Text transform
18. Sanjib

    Really helpfull… Thanks
19. A_Flama

    Great tip!!!
20. Hỏi đáp

    Nice! Thanks for tricks! Great HTML5! :)
21. Martijn

    Any word on Opera supporting this?
22. Andy Lorenz

    what others have said about there being a slight problem with the code on this page are correct.

    The line

    ::-moz-placeholder { color:#f00; } /* firefox 19+ */
    

    should be

    :-moz-placeholder { color:#f00; } /* firefox 19+ */
    

    Took me 5 minutes and a quick test to realise why firefox wasn’t styling correctly…
23. Tim

    Thank you. I love you. I’d have never guessed that …
24. Crispen Smith

    Hey, I’m just discovering placeholder text and it really feels like this is a godsend for clean UI. Knowing it can be styled makes it even better.

    One question; currently clicking on the view demo link seems to load the correct URL, but that URL seems to load the example for the resizer handles blogpost. Was that your intention?
25. Stefan

    Be careful, in Firefox the placeholder opacity is not 1.
    If you want a 100% black color for placeholder, please write :

    input:-moz-placeholder {
        color:#000;
        opacity: 1;
    }
    
26. Barron

    thank you very much for the explanation sir …
27. Cameron

    Thank you! Worked as described, and saved me some effort.
28. hage

    i want to how to use text-align in placeholder
29. Rahul Giri

    Dude you are awesome.i really want it badly. because its work in IE7 also. thanks a lot man.
• Martijn

  @Rahul no it doesn’t ;)
30. Friv

    I think the important technical thing to consider is that placeholder pseudos need to be separated and cannot be grouped, for some reason it is causing issue with FireFox:

    Good:

    input::-webkit-input-placeholder {
       color:rgba(0,0,0,0.5);
    }
    
    input::-moz-placeholder {
       color:rgba(0,0,0,0.5);
    }
    

    Bad:

    input::-webkit-input-placeholder,
    input::-moz-placeholder {
       color:rgba(0,0,0,0.5);
    }
    

    Hope this helps.