Change the form field placeholder text color

The extremely handy, html5 form field placeholder text is handy, but the preset is gray, what if you have a gray background in you field?

I did some editing here on May 22 3013

Luckily, it’s not too painful to change the color.

Example HTML:





And the CSS:


/*Safari & Chrome*/
::-webkit-input-placeholder{
    color:red;
} 
/*Firefox*/
::-moz-placeholder{
    color:red;
}
:-moz-placeholder{
    color:red;
}
/*IE*/
:-ms-input-placeholder {  
   color:red;  
}

Notice that you can’t chain them like this:


::-webkit-input-placeholder,
::-moz-placeholder {
    /*This won't work*/
    color:red;
}

In older browser the placeholder="" doesn’t work. Then you can use this nice jQuery plugin. The plugin is not existing anymore, use some of these solutions: this or this.

Webkit bug: Try to text-align:center; wont work in Webkit thanks to this bug. Now fixed.

Comments

Club-Mate, the beverage → club-mate.fi