current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 1444 down vote favorite
531

Chrome supports the placeholder attribute on input[type=text] elements (others probably do too).

But the following CSS doesn't do diddly squat to the placeholder's value:

CSS:

input[placeholder], [placeholder], *[placeholder] {
   color:red !important;
}

HTML:

<input type="text" placeholder="Value" />

Value will still remain grey instead of red.

Is there a way to change the color of the placeholder text?

I'm already using the jQuery placeholder plugin for the browsers that don't support the placeholder attribute natively.

share|improve this question
182  
Quick heads-up (not a solution, just a FYI): if I recall correctly, input[placeholder] just matches <input> tags that have a placeholder attribute, it doesn't match the placeholder attribute itself. –  pinkgothic Apr 9 '10 at 19:58
3  
Yah, the thought crossed my mind that this may be like trying to style an element's "title" attribute. So +1 for thinking alike! –  David Murdoch Apr 9 '10 at 20:01

10 Answers 10

up vote 2239 down vote accepted

Implementation

There are three different implementations: pseudo-elements, pseudo-classes, and nothing.

IE up to version 9 and Opera up to version 12 do not support any CSS selector for placeholders.

The discussion about the best implementation is still going on. Note the pseudo-elements act like real elements in the Shadow DOM. A padding on an input will not get the same background color as the pseudo-element.

CSS selectors

User agents are required to ignore a rule with an unknown selector. See Selectors Level 3:

a group of selectors containing an invalid selector is invalid.

So we need separate rules for each browser. Otherwise the whole group would be ignored by all browsers. 

::-webkit-input-placeholder { /* WebKit browsers */
    color:    #999;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #999;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #999;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
   color:    #999;
}
<input placeholder="Stack Snippets are awesome!">

Usage notes

  • Be careful to avoid bad contrasts. Firefox's placeholder appears to be defaulting with a reduced opacity, so needs to use opacity: 1 here.
  • Note that placeholder text is just cut off if it doesn’t fit – size your input elements in em and test them with big minimum font size settings. Don’t forget translations: some languages need more room for the same word.
  • Browsers with HTML support for placeholder but without CSS support for that (like Opera) should be tested too.
  • Some browsers use additional default CSS for some input types (email, search). These might affect the rendering in unexpected ways. Use the properties -webkit-appearance and -moz-appearance to change that. Example:
    [type="search"] {
        -moz-appearance:    textfield;
        -webkit-appearance: textfield;
        appearance: textfield;
    }
share|improve this answer
30  
Don't forget to add textarea placeholder support as well! –  philfreo Jun 16 '11 at 0:25
55  
@philfreo Uhm, is my explanation not good enough? If you combine the selectors the whole rule is ignored by both rendering engines due to the unknown selector. –  toscho Jun 21 '11 at 1:13
7  
Note also that although Webkit considers this to have rather strong specificity, Mozilla does not. You are likely to have to pop a few !importants in there to get things to show up. –  dmnc Sep 5 '11 at 14:38
11  
@toscho: thanks for the great answer. I just needed a little demonstration of it "live", so your example can also be reached here: jsfiddle.net/Sk8erPeter/KyVXK. Thanks again. –  Sk8erPeter Jan 27 '13 at 1:39
51  
Firefox's placeholder appears to be defaulting with a reduced opacity. For anyone else hard-refreshing and wondering why the heck this doesn't appear to be working ("why is my white text still grey.."), use opacity:1 –  jwinn Apr 3 '13 at 18:33
up vote 186 down vote
+50
 
*::-webkit-input-placeholder {
    color: red;
}
*:-moz-placeholder {
    /* FF 4-18 */
    color: red;
}
*::-moz-placeholder {
    /* FF 19+ */
    color: red;
}
*:-ms-input-placeholder {
    /* IE 10+ */
    color: red;
}

This will style all input and textarea placeholders.

JSFiddle Demo

Do not group these rules and make a separate rule for every selector (one invalid selector in a group makes the whole group invalid)

share|improve this answer
    
MSDN doc you linked to, states its only supported in Internet Explorer 10. Still a good find, but not very useful till IE10 userbase becomes significant (we may be looking at a time-frame of years for that). –  danishgoel Mar 14 '12 at 20:44
    
Realistically, you are going to want to style placeholders across the site uniformly, not style every individual input by ID. –  BadHorsie Sep 10 '13 at 11:03
5  
After FF19 you have to use ::-moz-placeholder –  coelho Oct 6 '13 at 13:22
1  
+1 for demo fiddle –  Pilot Mar 29 at 18:01
    
You need to put this CSS at the bottom of you stylesheet, if you also apply a class on the input, in order to get it working on IE (11). See this fork on JSFiddle jsfiddle.net/9kkef. Open the page both in IE and another browser, in IE you will see that the placeholder text will be in the color of the applied class. –  Timo002 Jul 2 at 7:44
up vote 114 down vote

You may also want to style textareas:

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
  color: #636363;
}
input:-moz-placeholder, textarea:-moz-placeholder {
  color: #636363;
}
share|improve this answer
up vote 39 down vote

In addition to toscho's answer I've noticed some webkit inconsistencies between Chrome 9-10 and Safari 5 with the CSS properties supported that are worth noting.

Specifically Chrome 9 and 10 do not support background-color, border, text-decoration and text-transform when styling the placeholder.

The full cross-browser comparison is here.

share|improve this answer
up vote 21 down vote

For bootstrap LESS users, there is a mixin .placeholder:

// Placeholder text
// -------------------------
.placeholder(@color: @placeholderText) {
  &:-moz-placeholder {
    color: @color;
  }
  &:-ms-input-placeholder {
    color: @color;
  }
  &::-webkit-input-placeholder {
    color: @color;
  }
}
share|improve this answer
up vote 11 down vote

In FF and IE, the normal input text color overrides the color property of placeholders. So, we need to 

::-webkit-input-placeholder { 
    color: red; text-overflow: ellipsis; 
}
:-moz-placeholder { 
    color: #acacac !important; text-overflow: ellipsis; 
}
::-moz-placeholder { 
    color: #acacac !important; text-overflow: ellipsis; 
} /* for the future */
:-ms-input-placeholder { 
    color: #acacac !important; text-overflow: ellipsis; 
}
share|improve this answer
1  
Important in Explorer saved my life! :D –  sara.potyscki May 14 at 13:38
up vote 9 down vote

Cross-browser solution:

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

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

Credit: David Walsh

share|improve this answer
up vote 8 down vote

this will work fine. DEMO HERE

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { 
    color:    #666;
}
input:-moz-placeholder, textarea:-moz-placeholder { 
    color:    #666;
}
input::-moz-placeholder, textarea::-moz-placeholder { 
    color:    #666;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder { 
    color:    #666;
}
share|improve this answer
up vote 5 down vote

I don't remember where I've found this code snippet on the internet (it wasn't written by me, don't remember where I've found it, nor who wrote it).

$('[placeholder]').focus(function() {
        var input = $(this);
        if (input.val() == input.attr('placeholder')) {
            input.val('');
            input.removeClass('placeholder');
        }
    }).blur(function() {
        var input = $(this);
        if (input.val() == '' || input.val() == input.attr('placeholder')) {
            input.addClass('placeholder');
            input.val(input.attr('placeholder'));
        }
    }).blur();
    $('[placeholder]').parents('form').submit(function() {
        $(this).find('[placeholder]').each(function() {
            var input = $(this);
            if (input.val() == input.attr('placeholder')) {
                input.val('');
            }
        })
    });

Just load this javascript and then edit your placeholder with CSS by calling this rule:

form .placeholder {
   color: #222;
   font-size: 25px;
   /* etc */
}
share|improve this answer
    
This is the old way of doing it, which I've used quite a bit. The disadvantage is that the placeholder text disappears when you focus. I've found this to be annoying when the UI doesn't also include labels next to the input. Over the past several months I've started replacing this method with using placeholder text, which I think is a UX improvement. –  Redtopia Dec 10 '13 at 19:31
    
The other problem with code like this is your serverside code has to deal with placeholder text as empty input, which has problems with edge cases where you want to enter a town called "Town". Instead of checking values against the placeholder text you should really use a data-modified flag on the input, and then clear the input on form submit if the flag is not set. And for AJAX interfaces you may not even have a form, so you should be able to associate an arbitrary submission event with the input. This is one of those really simple situations that isn't. –  Whelkaholism Mar 7 at 13:16
up vote 1 down vote

How about this

<input type="text" value="placeholder text" onfocus="this.style.color='#000'; 
this.value='';" style="color: #f00;"/>

No CSS or placeholder, but you get the same functionality.

share|improve this answer
4  
what happens if someone clicks again after writing something.. the original text they wrote will be gone! –  Lucky Soni May 2 '13 at 10:04
    
@LuckySoni you could do this, but I personally prefer the first one. <input type="text" value="placeholder text" onfocus="if(!this.haswriting){this.style.color='#000'; this.value='';}" onblur="if(!this.value){this.style.color='#f00'; this.value='placeholder text'; this.haswriting=false;}else{this.haswriting=true};" style="color: #f00;"/> –  user1729061 May 18 '13 at 18:25
3  
Even your second version doesn't provide the same functionality. If the user submits the <form> with this input the placeholder text will be sent to the server. I seen so many sites do this wrong. –  lqc May 30 '13 at 8:35
2  
@lqc Yes, it's amazing how many developers out there pay no attention to detail and usability. –  BadHorsie Sep 10 '13 at 11:05

protected by Community♦ Jul 5 '12 at 12:56

Thank you for your interest in this question. Because it has attracted low-quality answers, posting an answer now requires 10 reputation on this site.

Would you like to answer one of these unanswered questions instead?

Not the answer you're looking for? Browse other questions tagged or ask your own question.