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

＆＃13;

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

＆＃13;

<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">

＆＃13;

Answer 2

您还可以使用没有占位符的Javascript解决方案来执行您想要执行的操作。这是代码：

＆＃13;

//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.

＆＃13;

<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;"/>

＆＃13;

请注意，此修复程序不是临时占位符，不应用于实际的登录表单。我建议在答案中使用@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;
  }

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

3 个答案: