添加一个非常简单的可能性：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

将此CSS代码用于所有浏览器工作：

 ::placeholder{color:#ccc;}

  **HTML**

 <input class="form-control" placeholder="write Here..">

HTML的一部分：

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

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

  ::placeholder{
  color:blue;
   }

最简单的方法是：

#yourInput::placeholder {
    color: red;/*As an example*/
}
/* if that would not work, you can always try styling the attribute itself: */
#myInput[placeholder] {
    color: red;
}

如果您正在使用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;
}

在html文件中：

<input type="text" placeholder="placeholder" class="redPlaceHolder">

在css文件中：

.redPlaceHolder{
   color: #ff0000;
}