跨浏览器解决方案：

/* 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

添加一个非常简单的可能性：CSS过滤器！

它将设置所有内容的样式，包括占位符。

下面将在同一调色板上设置两个输入元素，使用色调过滤器进行颜色更改。它现在在浏览器中呈现得很好（除了…）

输入{滤镜：棕褐色（100%）饱和（400%）灰度（0）对比度（200%）色调旋转（68deg）反转（18%）；}<input placeholder=“Hello world！”/><input-type=“date”/><br><输入类型=“范围”/><input-type=“color”/>

要允许用户使用输入类型颜色进行动态更改，或查找细微差别，请查看以下片段：

发件人：Codepen

函数stylElem（）{stylo.dataset.hue=（（parseInt（stylo.value.substring（1），16））/46666）.toFixed（0）Array.from（document.querySelectorAll（'输入，音频，视频'））.forEach（函数（e）{e.style.cssText+=“；滤镜：棕褐色（100%）饱和（400%）灰度（0）对比度（200%）色调旋转（”+styl.dataset.hue+“deg）反转（”+（styl.ddataset.hue/3.6）+“%）”out.innerText=e.style.css文本})()}stylElem（）正文｛背景：黑色；颜色：白色｝选择颜色！<input type=“color”id=“stylo”oninput=“stylElem（）”><br><div id=“out”></div><p><input placeholder=“Hello world！”/><input-type=“date”/><br><输入类型=“范围”/><br><音频控件src=“#”></audio><br><br><视频控件src=“#”></video>

Css过滤器文档：https://developer.mozilla.org/en-US/docs/Web/CSS/filter

如果您正在使用Bootstrap，但无法使其工作，那么您可能错过了Bootstrap本身添加这些选择器的事实。这是我们正在讨论的Bootstrap v3.3。

如果您试图更改.form控件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;
}

实施

有三种不同的实现：伪元素、伪类和无。

WebKit、Blink（Safari、Google Chrome、Opera 15+）和Microsoft Edge使用伪元素：：：-WebKit输入占位符。[参考]Mozilla Firefox 4到18使用了伪类：：-moz占位符（一个冒号）。[参考]Mozilla Firefox 19+使用了伪元素：：：-moz占位符，但旧的选择器仍将工作一段时间。[参考]Internet Explorer 10和11使用伪类：：-ms输入占位符。[参考]2017年4月：大多数现代浏览器支持简单的伪元素：：placeholder[Ref]

InternetExplorer9及更低版本根本不支持占位符属性，而Opera12及更低版本不支持任何占位符CSS选择器。

关于最佳实现的讨论仍在继续。请注意，伪元素的行为与ShadowDOM中的真实元素类似。输入上的填充不会获得与伪元素相同的背景色。

CSS选择器

用户代理需要忽略具有未知选择器的规则。请参见选择器级别3：

包含无效选择器的选择器组无效。

因此，我们需要为每个浏览器制定单独的规则。否则，所有浏览器都会忽略整个组。：：-webkit输入占位符｛/*webkit，Blink，Edge*/颜色：#909；}：-moz占位符｛/*Mozilla Firefox 4到18*/颜色：#909；不透明度：1；}：：-moz占位符｛/*Mozilla Firefox 19+*/颜色：#909；不透明度：1；}：-ms输入占位符｛/*Internet Explorer 10-11*/颜色：#909；}：：-ms输入占位符｛/*Microsoft Edge*/颜色：#909；}：：占位符｛/*大多数现代浏览器现在都支持此功能*/颜色：#909；}<input placeholder=“堆栈代码段太棒了！”>

使用说明

小心避免形成不良对比。Firefox的占位符似乎默认为不透明度降低，因此需要使用不透明度：1。请注意，如果占位符文本不适合，它会被截断——在em中调整输入元素的大小，并使用最大最小字体大小设置测试它们。别忘了翻译：有些语言需要更多的空间来容纳同一个单词。对于支持HTML占位符但不支持CSS占位符的浏览器（如Opera）也应该进行测试。占位符不能替代标签，因此请确保您也有标签某些浏览器对某些输入类型（电子邮件、搜索）使用额外的默认CSS。这些可能会以意想不到的方式影响渲染。使用财产-webkit-appearance和-moz-appearance进行更改。例子：

    [type="search"] {
        -moz-appearance:    textfield;
        -webkit-appearance: textfield;
        appearance: textfield;
    }

：：占位符{颜色：红色；}<input-type=“text”placeholder=“Value”>

HTML的一部分：

 <form action="www.anything.com">
 <input type="text" name="name"
  placeholder="Enter sentence"/>
  </form>

我将展示如何通过CSS更改“Enter sentence”表达式的颜色：

  ::placeholder{
  color:blue;
   }