10

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?

Joonas
  • 7,107
  • 9
  • 38
  • 64
user1753622
  • 277
  • 3
  • 19
  • You mean you want to know how to style the placeholder text? – Simon Feb 06 '13 at 11:47
  • 1
    Why "custom"? That property is defined in HTML5 – Viktor S. Feb 06 '13 at 11:48
  • 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 ;) – Tom Sarduy Feb 06 '13 at 12:02

1 Answers1

6

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:

Community
  • 1
  • 1
Tom Sarduy
  • 16,878
  • 8
  • 67
  • 83