How to set the color of "placeholder" text?
Is that possible to set the color of placeholder
text ?
<textarea placeholder="Write your message here..."></开发者_StackOverflow社区textarea>
::-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;
}
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
Try this
textarea::-webkit-input-placeholder { color: #999;}
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; }
#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.
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" />
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; }
精彩评论