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

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中，就像下面的一样

​

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