By default, if you put placeholder, the color is grey, but can we change it to our desire color?
yes we can.
Since this is HTML5 attribute , so vendor prefix still required at this time
example.

<input type="text" placeholder="placeholder default input">

what we get is like this

placeholder-default

So, how we gonna do change placehodler color? how we can change it to our desire color?

here are the CSS

::-webkit-input-placeholder {
color: green;
}
:-moz-placeholder { /* Firefox 18- */
color: green;
}
::-moz-placeholder {  /* Firefox 19+ */
color: green;
}
:-ms-input-placeholder {
color: green;
}

so it will change into something like this
placeholder-green

cool right? but wait, another placeholder need different color. yes still can.
first, create the html with ID/Class

<input type="text" id="input_rare" placeholder="placeholder input rare">

CSS:

#input_rare::-webkit-input-placeholder {
color: red;
}
#input_rare:-moz-placeholder { /* Firefox 18- */
color: red;
}
#input_rare::-moz-placeholder {  /* Firefox 19+ */
color: red;
}
#input_rare:-ms-input-placeholder {
color: red;
}

the you will get placeholder with this color
placeholder-red

and now, we are done. lets see the html and css involved.

Output:

placeholder-full

How to change placeholder color with css
Tagged on:                 

Leave a Reply

Your email address will not be published. Required fields are marked *