input[type=text]元素上的占位符属性（其他可能也支持）。但是以下
CSS对占位符的值没有任何作用： input[placeholder], [placeholder], *[placeholder] {
color: red !important;
}
<input type="text" placeholder="Value">
Value仍将保留为grey而不是red。是否可以更改占位符文本的颜色？
#1 楼
实现共有三种不同的实现：伪元素，伪类，什么也没有。
WebKit，Blink（Safari，Google Chrome，Opera 15+ ）和Microsoft Edge使用的是伪元素：
::-webkit-input-placeholder。 [Ref] Mozilla Firefox 4至18使用的是伪类：
:-moz-placeholder（一个冒号）。 [Ref] Mozilla Firefox 19+使用的是伪元素：
::-moz-placeholder，但是旧的选择器仍然可以使用一段时间。 [Ref] Internet Explorer 10和11使用的是伪类：
:-ms-input-placeholder。 [Ref] 2017年4月：大多数现代浏览器都支持简单的伪元素
::placeholder [Ref] Internet Explorer 9及更低版本不支持
placeholder属性虽然Opera 12及更低版本完全不支持占位符的CSS选择器。关于最佳实现的讨论仍在进行中。请注意，伪元素的行为类似于Shadow DOM中的真实元素。
padding上的input不会获得与伪元素相同的背景色。CSS选择器
用户代理必须忽略具有未知选择器的规则。请参阅选择器级别3：
包含无效选择器的一组选择器无效。
所以我们需要为每个浏览器使用单独的规则。否则整个组将被所有浏览器忽略。
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color: #909;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #909;
opacity: 1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #909;
opacity: 1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #909;
}
::-ms-input-placeholder { /* Microsoft Edge */
color: #909;
}
::placeholder { /* Most modern browsers support this now. */
color: #909;
}
<input placeholder="Stack Snippets are awesome!">
使用注意事项
注意避免强烈的对比。 Firefox的占位符似乎是默认的，具有降低的不透明度，因此需要在此处使用
opacity: 1。请注意，如果占位符文本不合适，则会将其截断-在
em中调整输入元素的大小，并使用较大的最小字体设置对其进行测试。不要忘记翻译：某些语言需要为同一个单词留出更多空间。 也应测试具有对
placeholder的HTML支持但不支持CSS的浏览器（例如Opera）。某些浏览器对某些
input类型（email，search）使用其他默认CSS。这些可能会以意想不到的方式影响渲染。使用属性-webkit-appearance和-moz-appearance进行更改。示例： [type="search"] {
-moz-appearance: textfield;
-webkit-appearance: textfield;
appearance: textfield;
}
#2 楼
/* do not group these rules */
*::-webkit-input-placeholder {
color: red;
}
*:-moz-placeholder {
/* FF 4-18 */
color: red;
opacity: 1;
}
*::-moz-placeholder {
/* FF 19+ */
color: red;
opacity: 1;
}
*:-ms-input-placeholder {
/* IE 10+ */
color: red;
}
*::-ms-input-placeholder {
/* Microsoft Edge */
color: red;
}
*::placeholder {
/* modern browser */
color: red;
}
<input placeholder="hello"/> <br />
<textarea placeholder="hello"></textarea>
这将设置所有
input和textarea占位符的样式。重要说明：请勿对这些规则进行分组。相反，为每个选择器制定一个单独的规则（组中一个无效的选择器会使整个组无效）。
#3 楼
您可能还想设置textareas的样式： input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
color: #636363;
}
input:-moz-placeholder, textarea:-moz-placeholder {
color: #636363;
}
#4 楼
对于Bootstrap和Less用户，有一个mixin .placeholder： // Placeholder text
// -------------------------
.placeholder(@color: @placeholderText) {
&:-moz-placeholder {
color: @color;
}
&:-ms-input-placeholder {
color: @color;
}
&::-webkit-input-placeholder {
color: @color;
}
}
#5 楼
除了toscho的答案外，我还注意到值得注意的是Chrome 9-10和Safari 5之间的webkit不一致，并且支持CSS属性。特别是Chrome 9和10不支持
background-color，border，设置占位符样式时，请参阅text-decoration和text-transform。完整的跨浏览器比较在这里。
#6 楼
对于Sass用户：// Create placeholder mixin
@mixin placeholder($color, $size:"") {
&::-webkit-input-placeholder {
color: $color;
@if $size != "" {
font-size: $size;
}
}
&:-moz-placeholder {
color: $color;
@if $size != "" {
font-size: $size;
}
}
&::-moz-placeholder {
color: $color;
@if $size != "" {
font-size: $size;
}
}
&:-ms-input-placeholder {
color: $color;
@if $size != "" {
font-size: $size;
}
}
}
// Use placeholder mixin (the size parameter is optional)
[placeholder] {
@include placeholder(red, 10px);
}
#7 楼
这样就可以了。此处演示： 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;
}
<input type="text" placeholder="Value" />
#8 楼
在Firefox和Internet Explorer中，正常的输入文本颜色会覆盖占位符的color属性。因此，我们需要 ::-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;
}
#9 楼
如果您使用自动前缀，请使用新的::placeholder。请注意，不赞成使用Bootstrap中的.placeholder mixin。为此，
示例：
input::placeholder { color: black; }
使用自动前缀时，以上内容将转换为适用于所有浏览器的正确代码。
评论
已投票。现在这应该是正确的答案。
– Dror酒吧
7月26日下午16:01
#10 楼
跨浏览器解决方案：/* 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; }
信誉：David Walsh
#11 楼
现在，我们有了一种将CSS应用于输入的占位符的标准方法：来自此CSS模块4级草案的::placeholder伪元素。评论
这在Firefox 51中有效。我将使用这种方法。其他浏览器将很快赶上我（如果未应用将成为标准样式的功能，则不会破坏任何功能）。
–Lonnie Best
17年2月27日在8:39
#12 楼
我只是为Mozilla Firefox 19+意识到，浏览器为占位符提供了不透明度值，因此颜色不是您真正想要的颜色。input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
color: #eee; opacity:1;
}
input:-moz-placeholder, textarea:-moz-placeholder {
color: #eee; opacity:1;
}
input::-moz-placeholder, textarea::-moz-placeholder {
color: #eee; opacity:1;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
color: #eee; opacity:1;
}
我覆盖了将
opacity换为1，这样就很好了。#13 楼
我不记得在互联网上哪里找到了此代码片段（它不是我写的，不记得我在哪里找到的，也不是谁写的）。$('[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('');
}
})
});
只需加载以下JavaScript代码，然后通过调用以下规则即可使用CSS编辑占位符：
form .placeholder {
color: #222;
font-size: 25px;
/* etc. */
}
评论
这是做旧的方法，我已经使用了很多。缺点是占位符文本在您聚焦时会消失。当UI在输入旁边也不包含标签时，我发现这很烦人。在过去的几个月中，我开始使用占位符文本替换此方法，我认为这是对UX的改进。
– Redtopia
2013年12月10日19:31
这样的代码的另一个问题是您的服务器端代码必须将占位符文本作为空输入处理，这在您要进入称为“镇”的城镇的边缘情况下存在问题。而不是对照占位符文本检查值，您应该真正在输入上使用经过数据修改的标志，然后在未设置标志的情况下在表单提交上清除输入。对于AJAX界面，您甚至可能没有表单，因此您应该能够将任意提交事件与输入相关联。这是不是的那些真正简单的情况之一。
– Whekaholism
2014年3月7日13:16
#14 楼
我认为此代码将起作用，因为仅输入类型文本需要占位符。因此，这一行CSS足以满足您的需求：input[type="text"]::-webkit-input-placeholder {
color: red;
}
评论
不要再使用这个了。还有更多带有占位符和更多前缀的元素。请参阅上面的解决方案，或将:: placeholder与自动前缀一起使用。
– RiZKiT
18年7月19日在15:21
#15 楼
对于Bootstrap用户，如果使用class="form-control"，则可能存在CSS特殊性问题。您应该获得更高的优先级：.form-control::-webkit-input-placeholder {
color: red;
}
//.. and other browsers
或者如果您使用的是Less：
.form-control{
.placeholder(red);
}
#16 楼
如果您使用的是Bootstrap，但无法正常工作，那么您可能错过了Bootstrap本身添加这些选择器的事实。这是我们正在讨论的Bootstrap v3.3。如果您尝试在.form-control CSS类中更改占位符，则应像这样重写它：
.form-control::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color: #777;
}
.form-control:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #777;
opacity: 1;
}
.form-control::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #777;
opacity: 1;
}
.form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #777;
}
#17 楼
怎么样 <input type="text" value="placeholder text" onfocus="this.style.color='#000';
this.value='';" style="color: #f00;" />
没有CSS或占位符，但是功能相同。
评论
如果有人在写完东西后再次单击会发生什么。他们写的原始文本将消失！
–幸运的索尼
13年5月2日在10:04
@LuckySoni您可以这样做，但是我个人更喜欢第一个。
–user1729061
13年5月18日在18:25
甚至您的第二个版本也不提供相同的功能。如果用户使用此输入提交
#18 楼
这个简短的代码：::-webkit-input-placeholder {color: red;}
:-moz-placeholder {color: red; /* For Firefox 18- */}
::-moz-placeholder {color: red; /* For Firefox 19+ */}
:-ms-input-placeholder {color: red;}
#19 楼
在移动平台上，我尝试了每种组合来更改颜色，最终是：-webkit-text-fill-color: red;
达到了效果。
评论
此属性使您可以为文本指定填充颜色。如果未设置，则将使用颜色属性进行填充。在我看来，您还有其他一些CSS规则正在设置color属性。
–大卫·默多克（David Murdoch）
15年8月5日在10:25
#20 楼
对于使用Bourbon的SASS / SCSS用户，它具有内置功能。<br />//main.scss
@import 'bourbon';
input {
width: 300px;
@include placeholder {
color: red;
}
}
CSS输出，您还可以抓取此部分并将其粘贴到代码中。
//main.css
input {
width: 300px;
}
input::-webkit-input-placeholder {
color: red;
}
input:-moz-placeholder {
color: red;
}
input::-moz-placeholder {
color: red;
}
input:-ms-input-placeholder {
color: red;
}
#21 楼
尝试使用此代码针对不同风格的不同输入元素your css selector::-webkit-input-placeholder { /*for webkit */
color:#909090;
opacity:1;
}
your css selector:-moz-placeholder { /*for mozilla */
color:#909090;
opacity:1;
}
your css selector:-ms-input-placeholder { /*for for internet exprolar */
color:#909090;
opacity:1;
}
示例1：
input[type="text"]::-webkit-input-placeholder { /*for webkit */
color: red;
opacity:1;
}
input[type="text"]:-moz-placeholder { /*for mozilla */
color: red;
opacity:1;
}
input[type="text"]:-ms-input-placeholder { /*for for internet exprolar */
color: red;
opacity:1;
}
示例2：
input[type="email"]::-webkit-input-placeholder { /*for webkit */
color: gray;
opacity:1;
}
input[type="email"]:-moz-placeholder { /*for mozilla */
color: gray;
opacity:1;
}
input[type="email"]:-ms-input-placeholder { /*for for internet exprolar */
color: gray;
}
#22 楼
添加一个非常好的和简单的实际可能性：css过滤器！
它将设置所有样式，包括占位符。
以下将同时设置
input同一调色板上的元素，使用色相滤镜更改颜色。现在，它在浏览器中的显示效果非常好（例如...除外） input {
filter: sepia(100%) saturate(400%) grayscale(0) contrast(200%) hue-rotate(68deg) invert(18%);
}
<input placeholder="Hello world!" />
<input type="date" /><br>
<input type="range" />
<input type="color" />
要允许用户使用输入类型的颜色进行更改来动态更改它，或查找细微差别，请查看以下代码段：
来自：https://codepen.io/Nico_KraZhtest/笔/ bWExEB
function stylElem() {
stylo.dataset.hue = ((parseInt(stylo.value.substring(1), 16))/46666).toFixed(0)
Array.from(document.querySelectorAll('input, audio, video')).forEach(function(e){
e.style.cssText += ";filter:sepia(100%) saturate(400%)grayscale(0)contrast(200%)hue-rotate("+ stylo.dataset.hue+"deg)invert("+(stylo.dataset.hue/3.6)+"%)"
out.innerText = e.style.cssText
})()}
stylElem()
body {background: black; color: white}
Choose a color!
<input type="color" id="stylo" oninput="stylElem()">
<br>
<div id="out"></div> <p>
<input placeholder="Hello world!" />
<input type="date" /><br>
<input type="range" />
<br>
<audio controls src="#"></audio> <br><br>
<video controls src="#"></video>
Css过滤器文档：https：//developer.mozilla.org/en-US/docs/Web/CSS/filter
#23 楼
这是另一个示例： .form-control::-webkit-input-placeholder {
color: red;
width: 250px;
}
h1 {
color: red;
}
<div class="col-sm-4">
<input class="form-control" placeholder="Enter text here.." ng-model="Email" required/>
</div>
#24 楼
好的，占位符在不同的浏览器中的行为有所不同，因此您需要在CSS中使用浏览器前缀以使它们相同，例如，Firefox默认情况下为占位符提供透明性，因此需要在CSS中添加不透明度1，加上颜色，不是在大多数情况下，它是一个大问题，但最好使它们保持一致：*::-webkit-input-placeholder { /* WebKit browsers */
color: #ccc;
}
*:-moz-placeholder { /* Mozilla Firefox <18 */
color: #ccc;
opacity: 1;
}
*::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #ccc;
opacity: 1;
}
*:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #ccc;
}
#25 楼
您可以使用CSS更改HTML5输入的占位符颜色。如果偶然，您的CSS冲突，此代码说明正常工作，则可以使用如下所示的（！important）。::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color:#909 !important;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color:#909 !important;
opacity:1 !important;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color:#909 !important;
opacity:1 !important;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color:#909 !important;
}
::-ms-input-placeholder { /* Microsoft Edge */
color:#909 !important;
}
<input placeholder="Stack Snippets are awesome!">
希望这会有所帮助。
#26 楼
您可以将其用于输入和焦点样式：input::-webkit-input-placeholder { color:#666;}
input:-moz-placeholder { color:#666;}
input::-moz-placeholder { color:#666;}
input:-ms-input-placeholder { color:#666;}
/* focus */
input:focus::-webkit-input-placeholder { color:#eee; }
input:focus:-moz-placeholder { color:#eee } /* FF 4-18 */
input:focus::-moz-placeholder { color:#eee } /* FF 19+ */
input:focus:-ms-input-placeholder { color:#eee } /* IE 10+ */
#27 楼
最简单的方法是：#yourInput::placeholder {
color: red;/*As an example*/
}
/* if that would not work, you can always try styling the attribute itself: */
#myInput[placeholder] {
color: red;
}
#28 楼
这是使用CSS选择器的解决方案 ::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color: #909;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #909;
opacity: 1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #909;
opacity: 1;
}
::-ms-input-placeholder { /* Microsoft Edge */
color: #909;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #909;
}
WebKit，Blink（Safari，Google Chrome，Opera 15+）和Microsoft Edge使用的是伪元素：
::-webkit-input-placeholder。
Mozilla Firefox 4至18使用的是伪类：
：-moz-占位符（一个冒号）。 Mozilla Firefox 19+使用的是伪元素：
::-moz-placeholder，但是旧的选择器仍然可以使用一段时间。
Internet Explorer 10和11使用的是伪元素。 -class：
：-ms-input-placeholder。
Internet Explorer 9和更低版本完全不支持占位符属性，而Opera 12和更低版本不支持任何CSS选择器作为占位符。
#29 楼
指南针提供了一个混音器。以您的示例为例：
<input type="text" placeholder="Value">
在SCSS中使用指南针：
input[type='text'] {
@include input-placeholder {
color: #616161;
}
}
有关输入占位符mixin的信息，请参见文档。
#30 楼
HTML的一部分： <form action="www.anything.com">
<input type="text" name="name"
placeholder="Enter sentence"/>
</form>
我将展示如何通过CSS更改“输入句子”的表达颜色：
::placeholder{
color:blue;
}
评论
快速抬头（不是解决方案，只是FYI）：如果我没记错的话，input [placeholder]只是与具有占位符属性的标记匹配，它与占位符属性本身不匹配。是的，这种想法让我望而却步，这就像在尝试设置元素的“ title”属性一样。因此，+ 1可以让他们思考！
@MathiasBynens：placeholder-shown伪类与显示此类占位符文本的输入元素匹配。因此，它与标记匹配，就像输入选择器一样，但是现在显示占位符文本。它也与占位符属性本身不匹配。
@HEX与输入选择器不同，因为它会选择所有输入元素。 ：placeholder-shown仅选择当前显示占位符的输入元素，从而允许您仅设置这些元素的样式，并有效地设置占位符文本的样式。你想说什么？
@HEX（当然，它还会选择显示占位符文本的textarea元素。）