如何更改特定输入字段的占位符颜色？

Question

我想更改特定占位符的颜色。 我为我的项目使用了许多输入字段，问题是在某些部分我需要灰色占位符，而在某些部分我需要白色占位符。 我已经为此目的进行了搜索并找到了此解决方案。

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

但是这段代码是在所有输入占位符上实现的，我不需要所有输入占位符的颜色都相同。 所以任何人都可以请帮助我。 提前致谢。

Answer 1

您需要将-input-placeholder分配给某个classname ，并将该类添加到您需要其占位符的任何input ，就像这个JS Fiddle

 .change::-webkit-input-placeholder { /* WebKit, Blink, Edge */ color: #909; } .change:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #909; opacity: 1; } .change::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #909; opacity: 1; } .change:-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #909; } input[type="text"]{ display:block; width:300px; padding:5px; margin-bottom:5px; font-size:1.5em; }

 <input type="text" placeholder="text1" class="change"> <input type="text" placeholder="text2"> <input type="text" placeholder="text3"> <input type="text" placeholder="text4" class="change"> <input type="text" placeholder="text5">

Answer 2

您还可以使用没有占位符的 Javascript 解决方案来做您想做的事情。 这是代码：

 //This fix allows you to change the color to whatever textcolor is while also making text go away when you click on it. However, this fix does not put the temporary placeholder back into the textarea when there is no text inside the input.

 <input type="text" id="usr" value="Username" onclick="this.value = '';" style="color: red;"/> <input type="text" id="pwd" value="Password" onclick="this.value = ''; this.type = 'password';" style="color: green;"/>

请注意，此修复程序是一个临时占位符，不应用于实际登录表单。 我建议使用@Ayaz_Shah 在他的回答中推荐的内容。

Answer 3

 input::-moz-placeholder {
    color: white;
  }
  input:-moz-placeholder {
    color: white;
    font-size: 14px !important;
  }
  *::-webkit-input-placeholder {
    color: white;
    font-size: 14px !important;
  }
  *:-ms-input-placeholder {
    color: white;
    font-size: 14px !important;
  }
  *:-moz-placeholder {
    color: white;
    font-size: 14px !important;
  }