Change an input's HTML5 placeholder color with CSS
22
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:

HTML:

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 naively.
improve this question | comment
Russell Hane Created at: 2013-11-13 17:07:04 UTC By Russell Hane
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. - Elenora Murphy
Yah, the thought crossed my mind that this may be like trying to style an element's "title" attribute. So +1 for thinking alike! - Maya Gaylord
9 Answers
0
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 */
}

0
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.
0
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;
}

0
*::-webkit-input-placeholder {
    color: red;
}

*:-moz-placeholder {
    color: red;
}

*:-ms-input-placeholder {
    /* IE10+ */
    color: red;
}


This will style all input and textarea placeholders.

Demo: http://jsfiddle.net/SKS23/

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

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

WebKit and Blink (Safari, Google Chrome, Opera 15+) are using a pseudo-element: ::-webkit-input-placeholder.
Mozilla Firefox 4 to 18 is using a pseudo-class: :-moz-placeholder (one colon).
Mozilla Firefox 19+ is using a pseudo-element: ::-moz-placeholder, but the old selector will still work for a while.
Internet Explorer 10 is using a pseudo-class: :-ms-input-placeholder.
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;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #999;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color:    #999;
}


Usage notes

Be careful to avoid bad contrasts. 
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;
    }

0
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;
  }
}

0
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; 
}

0
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;
}

fadfadf - Guest
fadfadf - Guest
0
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.
Your Answer