我已经在我的移动平台上尝试了各种组合来改变颜色，最终是：

-webkit-text-fill-color: red;

这一招奏效了。

我只是意识到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;
}

我将不透明度覆盖为1，这样就很好了。

尝试此css

input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #ddd;
}
input::-moz-placeholder { /* Firefox 19+ */
  color: #ddd;
}
input:-ms-input-placeholder { /* IE 10+ */
  color: #ddd;
}
input:-moz-placeholder { /* Firefox 18- */
  color: #ddd;
}

<style>
    ::-webkit-input-placeholder { 
        color:red; 
     }
    ::-moz-placeholder { 
        color:red; 
    } /* firefox 22+ */
    :-ms-input-placeholder { 
        color:red; 
    } /* ie10,11 */
    input:-moz-placeholder { 
        color:red; 
    }
 </style>

这对大多数现代浏览器都很好

input::placeholder{
  color: red; // css implementation
}

以防万一，如果您正在使用SCSS

input {
  &::placeholder {
    color: red; // scss
  }
}

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