如何在css中更改占位符颜色答案

【问题标题】：How to change placeholder color in css如何在css中更改占位符颜色
【发布时间】：2016-01-13 16:31:45
【问题描述】：

<input name="email" type="text" id="email" size="30" value="" placeholder="EMAIL"/>
<input name="phone" type="text" id="phone" size="30" value="" placeholder="PHONE"/>

我有两个 id = "email" 的表单。第一个表单占位符颜色为白色。第二个是黑色的。

但是，我不知道如何在不更改电子邮件 ID 的情况下做到这一点。问题是我的第二个表单占位符颜色是白色。我看不到这个占位符，因为表单背景也是白色的。

input#email:-moz-placeholder{
  color:    #999 !important;
}

input#email:-ms-input-placeholder{
  color:    #999 !important;
}

【问题讨论】：

Change an input's HTML5 placeholder color with CSS的可能重复

标签： css placeholder

【解决方案1】：

试试这个：

#your_form input#email::-webkit-input-placeholder {color:#999;}
#your_form input#email::-moz-placeholder          {color:#999;}
#your_form input#email:-moz-placeholder           {color:#999;}
#your_form input#email:-ms-input-placeholder      {color:#999;}

【讨论】：

感谢@Igor Tkachuk。这个答案解决了我的问题

【解决方案2】：

如果我正确理解了您的问题，请将电话 ID 添加到与电子邮件相同的 CSS 规则中。像这样：

input#email:-moz-placeholder,  input#phone:-moz-placeholder {
  color:    #999 !important;
}
input#email:-ms-input-placeholder, input#phone:-ms-input-placeholder {
  color:    #999 !important;
}

或者只是删除 id 并使用占位符将每个输入设为灰色。

input:-moz-placeholder {
  color:    #999 !important;
}
input:-ms-input-placeholder {
  color:    #999 !important;
}

哦，为了您的信息，您需要添加更多前缀。阅读：Change an HTML5 input's placeholder color with CSS

【讨论】：