我试过这个：

Question

我在同一个html文件中有多个位置的表单。

我想在不同的地方为占位符设置不同的颜色。我试图将css类附加到名为form1的输入字段以更改它的颜色。

我试过这个：

.form1 input::-webkit-input-placeholder {
    color: #000 !important;
}

.form1 input:-moz-placeholder { /* Firefox 18- */
    color: #000 !important;  
}

.form1 input::-moz-placeholder {  /* Firefox 19+ */
    color: #000 !important;  
}

.form1 input:-ms-input-placeholder {  
    color: #000 !important;  
}

input::-webkit-input-placeholder {
    color: #ccc !important;
}

input:-moz-placeholder { /* Firefox 18- */
    color: #ccc !important;  
}

input::-moz-placeholder {  /* Firefox 19+ */
    color: #ccc !important;  
}

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

textarea::-webkit-input-placeholder {
    color: #ccc;
}

的HTML

 <form action="#" method="post" id="form2">
   <input type="text" id="name" name="name" placeholder="YOUR NAME" />
   <input type="email" id="email" name="email" placeholder="YOUR EMAIL" />
   <textarea rows="5" placeholder="MESSAGE"></textarea>
   <input type="submit" value="SEND MESSAGE" />
 </form>

 <form action="#" method="post" id="form1">
   <input class="form1" type="email" name="email" placeholder="Your Email" />
   <input type="submit" class="subscribe_btn" value="SUBSCRIBE" />
 </form>

它们都提供相同的color : #ccc

我做错了什么？

Answer 1

form1是一个ID。在你的CSS中，你正在瞄准一个班级。

fiddle

#form1 input::-webkit-input-placeholder {
  color: #000 !important;
}

#form1 input:-moz-placeholder {
  /* Firefox 18- */
  color: #000 !important;
}

#form1 input::-moz-placeholder {
  /* Firefox 19+ */
  color: #000 !important;
}

#form1 input:-ms-input-placeholder {
  color: #000 !important;
}

input::-webkit-input-placeholder {
  color: #ccc !important;
}

input:-moz-placeholder {
  /* Firefox 18- */
  color: #ccc !important;
}

input::-moz-placeholder {
  /* Firefox 19+ */
  color: #ccc !important;
}

input:-ms-input-placeholder {
  color: #ccc !important;
}

textarea::-webkit-input-placeholder {
  color: #ccc;
}

<form action="#" method="post" id="form2">
  <input type="text" id="name" name="name" placeholder="YOUR NAME" />
  <input type="email" id="email" name="email" placeholder="YOUR EMAIL" />
  <textarea rows="5" placeholder="MESSAGE"></textarea>
  <input type="submit" value="SEND MESSAGE" />
</form>

<form action="#" method="post" id="form1">
  <input class="form1" type="email" name="email" placeholder="Your Email" />
  <input type="submit" class="subscribe_btn" value="SUBSCRIBE" />
</form>

Answer 2

2个问题

<form action="#" method="post" id="form2">

您正在将id设置为form2。您需要将类设置为form2，即class =“form2”。

input::-moz-placeholder {  /* Firefox 19+ */
    color: #ccc !important;  
}

！important标志正在优先考虑这些问题。选择具有重叠！重要标志的相同元素是不好的做法。尝试从输入选择器中删除它们。

根据附加的css类更改占位符的颜色

我试过这个：

的HTML

2 个答案: