不同浏览器中特定元素的占位符颜色。

HTML

<input class='contact' type="email" placeholder="majed@firefly.com">

CSS 

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

您可以使用CSS更改HTML5输入的占位符颜色。如果碰巧，您的CSS冲突，此代码注释正常工作，您可以像下面这样使用（！important）。

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:#909 !important;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:#909 !important;
   opacity:1 !important;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:#909 !important;
   opacity:1 !important;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:#909 !important;
}
::-ms-input-placeholder { /* Microsoft Edge */
   color:#909 !important;
}

<input placeholder="Stack Snippets are awesome!">

希望这会有所帮助。

除了toscho的回答，我还注意到Chrome 9-10和Safari 5在支持CSS财产方面的一些webkit不一致，值得注意。

具体来说，Chrome 9和10在设置占位符样式时不支持背景色、边框、文本装饰和文本转换。

这里是完整的跨浏览器比较。

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

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

-webkit-text-fill-color: red;

这一招奏效了。

试试这个

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