How to style placeholder attribute across all browsers?

Question

I have an element like this <input type="text" placeholder="lorem ipsum">.

How do I style thisplaceholder attribute in CSS, so that it works across all browsers?

You mean you want to know how to style the placeholder text? — Simon, Feb 06 '13 at 11:47
Placeholder is an HTML5 form attribute which is supported across all modern browsers except IE. http://www.w3schools.com/html/html5_form_attributes.asp — Billy Moat, Feb 06 '13 at 11:48
There's already a [topic about this][1]. [1]: http://stackoverflow.com/questions/2610497/change-an-inputs-html5-placeholder-color-with-css — Michal M, Feb 06 '13 at 11:48
@Sjoerd: I think this one is more suitable http://stackoverflow.com/questions/2610497/change-an-inputs-html5-placeholder-color-with-css ;) — Tomas Ramirez Sarduy, Feb 06 '13 at 12:02

score 6 · Answer 1 · edited May 23 '17 at 10:32

Placeholder text in inputs has (in the browsers implementing it so far) a light gray color. To style it, you'll need vendor prefix CSS properties.

::-webkit-input-placeholder {
   color: red;
}

:-moz-placeholder { /* Firefox 18- */
   color: red;  
}

::-moz-placeholder {  /* Firefox 19+ */
   color: red;  
}

:-ms-input-placeholder {  
   color: red;  
}

You may also check this very similar question:

Change an HTML5 input's placeholder color with CSS

How to style placeholder attribute across all browsers?

1 Answers1