How to set the color of “placeholder” text?

Question

Is that possible to set the color of placeholder text ?

<textarea placeholder="Write your message here..."></textarea>

Answer 1

Nobody likes the "refer to this answer" answers, but in this case it may help: Change an HTML5 input's placeholder color with CSS

Since it's only supported by a couple of browsers, you can try the jQuery placeholder plugin (assuming you can\are using jQuery). It allows you to style the placeholder text via CSS since it's really only a swap trick it does with focus events.

The plugin does not activate on browsers that support it, though, so you can have CSS that targets chrome\firefox and the jQuery plugin's CSS to catch the rest.

The plugin can be found here: https://github.com/mathiasbynens/jquery-placeholder

Answer 2

Try this

input::-webkit-input-placeholder { /* WebKit browsers */
    color:    #f51;
}
input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #f51;
}
input::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #f51;
}
input:-ms-input-placeholder { /* Internet Explorer 10+ */
    color:    #f51;
}

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

Answer 3

For giving placeholder a color just use these lines of code:

::-webkit-input-placeholder { color: red; }
::-moz-placeholder {color: red; }
:-ms-input-placeholder { color: red; } 
:-o-input-placeholder { color: red; } 

Answer 4

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

Answer 5

#Try this:

input[type="text"],textarea[type="text"]::-webkit-input-placeholder {
    color:#f51;
}
input[type="text"],textarea[type="text"]:-moz-placeholder {
    color:#f51;
}
input[type="text"],textarea[type="text"]::-moz-placeholder {
    color:#f51;
}
input[type="text"],textarea[type="text"]:-ms-input-placeholder {
    color:#f51;
}

##Works very well for me.

Answer 6

For Firefox use:

 input:-moz-placeholder { color: #aaa; }
 textarea:-moz-placeholder { color: #aaa;}

For all other browsers (Chrome, IE, Safari), just use:

 .placeholder { color: #aaa; }