Loading Gif

How to change the color of placeholder text within input elements using CSS

07Apr2015

How to change the color of placeholder text within input elements using CSS

Ever wanted to change the color of the text that’s added to an input field when you add the attribute placeholder="some text" ? Well read on my friends!

When I first tried to change the placeholder text color I assumed like thousands or others did that simply changing the CSS for the color of the input would do the trick.

Apparently not! This has no effect on the color of the placeholder text whatsoever!

After much googleing and playing around in firebug I found that firefox was adding the styling with ::-moz-placeholder I then tried out the other developer consoles and came up with the following (which Im sure many people have before me)

This changed the color but the text didn’t seem as vivid as the rest of the text on the page. It seems that by default most browsers apply opacity to the text. So to fix this we add the line opacity:1; to the CSS.

I also wanted what I expected to happen in the beginning to happen. That when I set the color or the input text it also changed the color of the placeholder text. So instead of setting a color in CSS I set the color to inherit ( color:inherit; ).

The following CSS sets the color of the placeholder text to be the same as the input text and removes the slight opacity added by default…