How to change placeholder color in css

Question

<input name="email" type="text" id="email" size="30" value="" placeholder="EMAIL"/>
<input name="phone" type="text" id="phone" size="30" value="" placeholder="PHONE"/>

I have two form that have id = "email". First form placeholder color is white. Second is black.

But, i dont know how to make this without changing email id. The problem is my second form placeholder color is white. I cannot see this placeholder because the form background is white too.

input#email:-moz-placeholder{
  color:    #999 !important;
}

input#email:-ms-input-placeholder{
  color:    #999 !important;
}

Possible duplicate of [Change an input's HTML5 placeholder color with CSS](http://stackoverflow.com/questions/2610497/change-an-inputs-html5-placeholder-color-with-css) — tigeruppercut, Jan 13 '16 at 07:53

score 4 · Accepted Answer · answered Jan 13 '16 at 07:45

4

Try this:

#your_form input#email::-webkit-input-placeholder {color:#999;}
#your_form input#email::-moz-placeholder          {color:#999;}
#your_form input#email:-moz-placeholder           {color:#999;}
#your_form input#email:-ms-input-placeholder      {color:#999;}

answered Jan 13 '16 at 07:45

Ihor Tkachuk

1,088
4
15
34

Thanks @Igor Tkachuk . This answer fix my problem – apisv2 Jan 13 '16 at 07:58

score 3 · Answer 2 · edited May 23 '17 at 11:46

If I understood your question correctly, add the phone id to the same CSS rule as email. Like this:

input#email:-moz-placeholder,  input#phone:-moz-placeholder {
  color:    #999 !important;
}
input#email:-ms-input-placeholder, input#phone:-ms-input-placeholder {
  color:    #999 !important;
}

Or just remove the id and make every input with a placeholder grey.

input:-moz-placeholder {
  color:    #999 !important;
}
input:-ms-input-placeholder {
  color:    #999 !important;
}

Oh, and for your information, there are more prefixes you need to add. Read this: Change an HTML5 input's placeholder color with CSS

How to change placeholder color in css

2 Answers2