Introduction of HTML5 Placeholder

HTML5 is one of the great inventions for web world. HTML5 introduce many new and important attributes, some are HTML based and some are through JavaScript API form. HTML5 Input “Placeholder” is one of the best feature, which help us to specify the hint for inputs, after focusing the input, it disappear and given a blank area to enter the value.

But this “input placeholder” is rigid by its nature. It's taking its own default style properties. So sometimes we have to add some extra style which overwrite the default style of Placeholder

Below I provide a simple style method, by which we can give our custom style or css for any input placeholder attribute.

Here are the code.

input::-webkit-input-placeholder {
  color: blue;
}
//For Firefox less than version 18
input:-moz-placeholder { /* Firefox 18- */
 color: blue;  
}
 //For Firefox More than version 19
input::-moz-placeholder {  /* Firefox 19+ */
 color: blue;  
}

input:-ms-input-placeholder {  
 color: blue;  
}

In above code, we provide the color to input box, because the default color of placeholder is “light grey”. So we have to add the custom color as per our template design.

You can also provide your required style to placeholder. Basically placeholder has default nature related to text and the color. So you can use above code to change the default behavior of placeholder.