如何设置“占位符”文本的颜色？

Question

是否可以设置placeholder文字的颜色？

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

Answer 1

没有人喜欢的“是指这样的回答”的答案，但在这种情况下，它可能会帮助：Change an HTML5 input's placeholder color with CSS

因为这只是一对夫妇的浏览器的支持，您可以尝试jQuery的占位符插件（假设你可以使用jQuery）。它允许您通过CSS设置占位符文本的样式，因为它实际上只是一个交换技巧，可以处理焦点事件。

虽然插件不支持在支持它的浏览器上激活，所以你可以使用CSS来定位chrome \ firefox和jQuery插件的CSS来抓取其余的CSS。

该插件可以在这里找到：https://github.com/mathiasbynens/jquery-placeholder

Answer 2

试试这个

textarea::-webkit-input-placeholder { color: #999;} 

Answer 3

对于Firefox使用：

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

对于所有其他浏览器（Chrome浏览器，IE，Safari浏览器），只需使用：

.placeholder { color: #aaa; } 

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

尝试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 6

#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 7

给了一个占位符的颜色只用几行代码：

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

的[更改输入的HTML5占位符颜色