Computer >> Computer tutorials >  >> Programming >> CSS

How to change an HTML5 input's placeholder color with CSS?


HTML5 introduced a new attribute called placeholder. This attribute on <input> and <textarea> elements provides a hint to the user of what can be entered in the field.

Here’s an example showing what a placeholder is. The hint to email i.e. [email protected] is placeholder here:

How to change an HTML5 input's placeholder color with CSS?

Example

You can try to run the following code to learn how to use placeholder attribute:

<!DOCTYPE HTML>
<html>
   <body>
      <form action="/cgi-bin/html5.cgi" method="get">
         Enter email : <input type="email" name="newinput" placeholder="[email protected]"/>
         <input type="submit" value="submit" />
      </form>
   </body>  
</html>

Example

To change the input placeholder color, use CSS.

<!DOCTYPE HTML>
<html>
   <style>
      ::-webkit-input-placeholder { /* WebKit, Blink, Edge */
        color:   #7F0D10;
      }
      :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
        color:    #7F0D10;
        opacity:  1;
      }
      ::-moz-placeholder { /* Mozilla Firefox 19+ */
        color:   #7F0D10;
        opacity:  1;
      }
   </style>
   <body>
      <form action="/cgi-bin/html5.cgi" method="get">
         Enter email : <input type="email" name="newinput" placeholder="[email protected]"/>
         <input type="submit" value="submit" />
      </form>
   </body>
</html>