html tutorial - How to change input field or textarea placeholder text color using CSS - html5 - html code - html form




Answer: Use vendor prefix CSS properties

    By default, the placeholder text of <input> field and <textarea> are displayed in light-weight grey color, and there's no normal CSS property to style them. However, browsers offer some non-standard vender specific pseudo-elements and pseudo-classes that you simply will use to customise the looks of placeholder text, like this:

    Example

      <!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: green;
          }
          :-moz-placeholder { /* Upto Firefox 18, Deprecated in Firefox 19  */
             color: green;  
          }
          ::-moz-placeholder {  /* Firefox 19+ */
             color: green;  
          }
          :-ms-input-placeholder {  
             color: green;  
          }
      </style>
      </head>
      <body>
          <form>
              <p><input type="text" placeholder="Please Enter your Name"><p>
              <p><textarea placeholder="Please Enter your feedback" cols="30"></textarea><p>
          </form>
      </body>
      </html> 

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