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

Posted 2023-03-05

【中文标题】如何更改特定输入字段的占位符颜色？

【英文标题】：How to change placeholder color of specific input field?

【发布时间】：2016-02-25 04:37:31

【问题描述】：

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

::-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;

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

【参考方案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">

【讨论】：

注意不要在自定义类中设置颜色。我正在这样做，并且我的自定义类颜色覆盖了 FF（和 IE，我认为）中的伪输入占位符颜色。

【参考方案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 在他的回答中推荐的内容。

【参考方案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;