使用CSS修改HTML5 input placeholder颜色

 **CSS选择器** 因为每个浏览器的CSS选择器都有所差异，所以需要针对每个浏览器做单独的设定。 

 ::-webkit-input-placeholder {` `/* WebKit browsers */` `color:`    `#999;` `}

:-moz-placeholder {` `/* Mozilla Firefox 4 to 18 */` `color:`    `#999;` `}

::-moz-placeholder {` `/* Mozilla Firefox 19+ */` `color:`    `#999;` `}

:-ms-input-placeholder {` `/* Internet Explorer 10+ */` `color:`    `#999;` `}

 [**Matt**](http://stackoverflow.com/users/365068)**：** textareas（文本框可拉伸）风格样式的代码，如下： `input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {` `color:` `#636363;` `}` `input:-moz-placeholder, textarea:-moz-placeholder {` `color:` `#636363;` `}` [**brillout.com**](http://stackoverflow.com/users/270274)**：** input和Textarea的字体颜色均为红色。所有样式都要针对不同的选择器而定，不要打包整体处理，因为其中一个出问题，其他的都会失效。 `*::-webkit-input-placeholder {` `color: red;` `}` `*:-moz-placeholder {` `color: red;` `}` `*:-ms-input-placeholder {` `/* IE10+ */` `color: red;` `}` [**James Donnelly**](http://stackoverflow.com/users/1317805/james-donnelly)**：** 在Firefox和IE里，正常input文本颜色覆盖占位符颜色的方法： `::-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;` `}` 还有一种好办法: `input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {` `color:`    `#666;` `}` `input:-moz-placeholder, textarea:-moz-placeholder {` `color:`    `#666;` `}` `input::-moz-placeholder, textarea::-moz-placeholder {` `color:`    `#666;` `}` `input:-ms-input-placeholder, textarea:-ms-input-placeholder {` `color:`    `#666;` `}` [**user1729061**](http://stackoverflow.com/users/1729061/user1729061)**：** 不用CSS和占位文本，同样能得到相同效果。 `` 原文：[Change an input's HTML5 placeholder color with CSS](http://stackoverflow.com/questions/2610497/change-an-inputs-html5-placeholder-color-with-css)