如何更改特定輸入字段的占位符顏色？

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