O'Reilly

HTML5 Placeholder Styling with CSS

By on  

4/25/2011: This attribute is not styleable as of Opera 11. Internet Explorer 10 will introduce placeholder support.

Last week I showed you how you could style selected text with CSS. I've searched for more interesting CSS style properties and found another: INPUT placeholder styling. Let me show you how to style placeholder text within INPUTelements with some unique CSS code.

The CSS

Firefox employs a different pattern than Safari and Chrome. Each property name is self-explanatory though:

/* all */
::-webkit-input-placeholder { color:#f00; }
::-moz-placeholder { color:#f00; } /* firefox 19+ */
:-ms-input-placeholder { color:#f00; } /* ie */
input:-moz-placeholder { color:#f00; }

/* individual: webkit */
#field2::-webkit-input-placeholder { color:#00f; }
#field3::-webkit-input-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
#field4::-webkit-input-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }

/* individual: mozilla */
#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; }

You will only want to employ the most basic of styles to the placeholder. Color, font-style, and font-variant are probably the styles you will want to employ. Go too far with your placeholder styling and you may create the animated GIF of input styles. Note that Mozilla Firefox doesn't support placeholder styling until version 4.

Styling elements with the placeholder attribute is something you don't need to do but could be just another one of those small details that sets your website apart from other websites. Hopefully IE9 and Opera soon follow suit in allowing styling of placeholder text within INPUT elements...or expose their API for doing so!

O'Reilly Velocity Conference
Save 20% with discount code AFF20

Recent Features

  • Regular Expressions for the Rest of Us

    Sooner or later you’ll run across a regular expression. With their cryptic syntax, confusing documentation and massive learning curve, most developers settle for copying and pasting them from StackOverflow and hoping they work. But what if you could decode regular expressions and harness their power? In...

  • Convert XML to JSON with JavaScript

    If you follow me on Twitter, you know that I've been working on a super top secret mobile application using Appcelerator Titanium.  The experience has been great:  using JavaScript to create easy to write, easy to test, native mobile apps has been fun.  My...

Incredible Demos

  • Printing MooTools Accordion Items

    Sometimes we're presented with unforeseen problems when it comes to our JavaScript effects. In this case, I'm talking about printing jQuery and MooTools accordions. Each "closed" accordion content element has its height set to 0 which means it will be hidden when the...

  • Link Nudging Using Dojo

    In the past we've tinkered with link nudging with MooTools and link nudging with jQuery. In an effort to familiarize myself with other JavaScript frameworks, we're going to try to duplicate that effect with another awesome framework: Dojo. The JavaScript: Attempt...

Discussion

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

  2. 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. 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. 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. 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?

  7. ^ I meant *unsupported* of course…

  8. 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. Brilliant… just what I was looking for. Thanks!

  10. gen

    Hey David,

    I am finding a strange behaviour in my placeholder text.when you click on the text placeholder , focus doesnt remain on the textbox and you can no longer type .
    <

    Enter the username
    >
    Double click on the text “Enter the username” works(can type anything inside textfield).
    click on the end/outside the text works.(can type anything inside textfield).
    But single click on the text and type does not work.(cannot see cursor at all)
    What could be the problem here?

    Thanks

  11. gen

    code is here:

    Enter the username

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

  13. 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; }
    
  14. ::-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?

  15. 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?

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

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

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

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

  19. Sanjib

    Really helpfull… Thanks

  20. Great tip!!!

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

  22. Martijn

    Any word on Opera supporting this?

  23. 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…

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

  25. 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?

  26. 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;
    }
    
  27. thank you very much for the explanation sir …

  28. Cameron

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

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

  30. 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 ;)

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

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!

Recently on David Walsh Blog

  • Access Mac Camera by Command Line

    With all of my recent command line tutorials, I've really gotten excited about the shell's simplicity and realized the true power of using the underlying technology of pretty UIs.  Since I work from home, I spend a lot of time on video calls, so when...

  • Open Files from Command Line on OS X

    I'm as much of a fan of application UIs as anyone else but I'm finding myself working more and more from the command line lately.  Much of that is becoming obsessed with media manipulation but I'm forcing myself to use less UIs so that I...

  • Get Stock Quotes From Command Line

    When I conned my way into my first professional programming gig, I didn't really think much about money -- just that I was getting my foot in the door.  But as my career has gone on, I've been more aware of money, investing, and retirement.  I've recently...

  • Geolocation API

    One interesting aspect of web development is geolocation; where is your user viewing your website from? You can base your language locale on that data or show certain products in your store based on the user's location. Let's examine how you can...

  • Create an Image Preview from a Video

    Visuals are everything when it comes to media.  When I'm trying to decide whether to watch a video on Netflix, it would be awesome to see a trailer of some kind, but alas that isn't available.  When I'm looking to download a video on my computer,...