Question

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

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

Answer 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

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

2 个答案: