How to change placeholder color of specific input field?
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.
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">