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

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

如果我没有正确理解你的问题，请将 phone 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

Answer 2

试试这个：

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

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

How to change placeholder color in css

css

placeholder