How to change HTML5 placeholder text color

HTML5 placeholder

The placeholder attribute specifies a hint that describes the expected value of an input field.

The placeholder attribute works with the following input types:

  • text
  • search
  • url
  • tel
  • email
  • password

By default placeholder text color is light gray color.

 

Now, We have to write some css for changing placeholder text color.

/* For all Browser */
::-webkit-input-placeholder { color: blue; }

/* For Chorme and Safari */
::-webkit-input-placeholder {
color: blue;
}

/* Mozilla Firefox 4 – 18 */
:-moz-placeholder {
color: blue;
opacity: 1;
}

/* Mozilla Firefox 19+ */
::-moz-placeholder {
color: blue;
opacity: 1;
}

/* Internet Explorer 10+ */
:-ms-input-placeholder {
color: blue;
}

 

 

If you want to change a specific input placehoder text color.

Add selector name before that.

 

#selector input:-moz-placeholder { color: blue; }
.selector input:-moz-placeholder { color: blue; }

#selector input::-webkit-input-placeholder { color: blue; }
.selector input::-webkit-input-placeholder { color: blue; }

 

…….

 

 

 

 

One thought on “How to change HTML5 placeholder text color

Comments are closed.