How to change placeholder color of specific input field?

Question

I want to change the color of specific place holder. I'm using many input fields for my project, problem is that in some section i need grey color for placeholder and in some section i need white color for placeholder. I have searched for this purpose and find this solution.

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

But this code is implement on all input placeholder, and i don't need all input placeholder in same color. So can anyone please help me. Thanks in advance.

Tucson

Answer 1

You need to assign the -input-placeholder to some classname and add that class to any input you need its placeholder to have this, just like this 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">

Esperance

Be careful not to set the color in your custom class. I was doing this and my custom class color was overriding the pseudo input placeholder color in FF (and IE, I think). – Laraelaraine

Answer 2

You could also use a Javascript solution without placeholder to do what you want to do. Here is the code:

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

Please not that this fix is a temporary placeholder and should not be used for actual login forms. I would suggest using what @Ayaz_Shah recommended in his answer.

Yean

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

Safeconduct