试试这个吧

input::placeholder 
  color:#900009;
}

<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应用于这个CSS模块Level 4草稿中输入的占位符：：占位符伪元素。

以下是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输入占位符。Mozilla Firefox 4到18使用了一个伪类：：-moz占位符（一个冒号）。Mozilla Firefox 19+使用了一个伪元素：：：-moz占位符，但旧选择器仍将工作一段时间。Internet Explorer 10和11正在使用伪类：：-ms输入占位符。InternetExplorer9及更低版本根本不支持占位符属性，而Opera12及更低版本不支持任何占位符CSS选择器。

在Firefox和Internet Explorer中，正常输入文本颜色覆盖占位符的颜色属性。所以，我们需要

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