在html文件中：

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

在css文件中：

.redPlaceHolder{
   color: #ff0000;
}

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

对于使用Bourbon的SASS/SCSS用户，它具有内置功能。

//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;
}

我认为这段代码会起作用，因为占位符仅用于输入类型文本。因此，这一行CSS将足以满足您的需要：

input[type="text"]::-webkit-input-placeholder {
    color: red;
}

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

-webkit-text-fill-color: red;

这一招奏效了。

您还可以设置文本区域的样式：

input:：-webkit输入占位符，textarea:：-webkit输入占位符{颜色：#FF9900；}输入：-moz占位符，文本区域：-moz占位符{颜色：#FF9900；}<textarea rows=“4”cols=“50”placeholder=“堆栈代码段很好！”></text区域>