Change Input HTML5 placeholder color with css

Change Input HTML5 placeholder color with css – HTML5 provides inbuilt feature to add the placeholders to the input fields which are supported in HTML5. Sometimes we need to change the default placeholder color of HTML5. Here in this tutorial we are going to explain how you can add your color to the HTML5’s input field’s placeholder.

Change Input HTML5 placeholder color with css

Add the following css to change the default HTML5 input’s placeholder-

<style type="text/css">
/* WebKit, Blink, Edge */
::-webkit-input-placeholder { 
color:blue;
}
 /* Mozilla Firefox 4 - 18 */
:-moz-placeholder {
   color:blue;;
}
/* Mozilla Firefox 19+ */
::-moz-placeholder { 
   color:blue;
}
/* ie. 10-11 */
:-ms-input-placeholder { 
   color:blue;
}
/*Standard*/
:placeholder-shown { 
  color:blue;
}
</style>

The above stylesheet will change the default placeholder color to the blue color. If you run the above example it will produce the output something like this –

Add Comment

📖 Read More

• 1. Disable HTML5 Validation