How to change input field or textarea placeholder text color using CSS

Topic: HTML / CSS« Prev|Next »

Answer: Use vendor prefix CSS properties

By default, the placeholder text of <input> field and <textarea> are displayed in light gray color, and there is no standard CSS property to style them. However, browsers provide some non-standard vendor specific pseudo-elements and pseudo-classes that you can use to customize the appearance of placeholder text, like this:

  • <!DOCTYPE html>
  • <html lang="en">
  • <head>
  • <meta charset="UTF-8">
  • <title>Styling Placeholder Text with CSS</title>
  • <style type="text/css">
  •     ::-webkit-input-placeholder {
  •        color: orange;
  •     }
  •     :-moz-placeholder { /* Upto Firefox 18, Deprecated in Firefox 19  */
  •        color: orange;  
  •     }
  •     ::-moz-placeholder {  /* Firefox 19+ */
  •        color: orange;  
  •     }
  •     :-ms-input-placeholder {  
  •        color: orange;  
  •     }
  • </style>
  • </head>
  • <body>
  •     <form>
  •         <p><input type="text" placeholder="Please Enter your Name"><p>
  •         <p><textarea placeholder="Please Enter your Comment" cols="30"></textarea><p>
  •     </form>
  • </body>
  • </html> 

Related FAQ

Here are some more FAQ related to this topic:

 
Close

Your Feedback:

 

We would love to hear from you! Please say something.