How to change the color of a placeholder for a specific input field?

Question

I want to change the color of a particular place owner. I use a lot of input fields for my project, the problem is that in some section I need a gray color for a placeholder, and in some section I need a white color for a placeholder. I searched for this goal and found 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 implemented on all input placeholders, and I don't need the entire input placeholder of the same color. So who can help me. Thanks in advance.

Answer 1

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

You can also use a non-placeholder Javascript solution to do what you want. 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 correction is a temporary placeholder and should not be used for actual login forms. I would suggest using what @Ayaz_Shah recommended in my answer.