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

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 并将 class 添加到任何 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;
  }

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

How to change placeholder color of specific input field?

html

css

input

placeholder