CODEWITHSUNDEEP
cssplaceholder
apisv2
apisv2

Reputation: 63

How to change placeholder color in css

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

Upvotes: 4

Views: 7689

Answers (2)

Jacob
Jacob

Reputation: 2071

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

Upvotes: 3

Ihor Tkachuk
Ihor Tkachuk

Reputation: 1118

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

Upvotes: 4

Related Questions