css style placeholder text input code example

Example 1: css style placeholder

input::-webkit-input-placeholder {/* Chrome/Opera/Safari/Edge */
	/*styles here*/
}

input::-ms-input-placeholder { /* Microsoft Edge */
   /*styles here*/
}

input:-ms-input-placeholder {/* IE 10+ */
	/*styles here*/
}

input::-moz-placeholder {/* Firefox 19+ */
	opacity: 1; /*Firefox by default has an opacity object that usually is ideal to reset so it matches webkit*/
	/*styles here*/
}

input:-moz-placeholder {/* Firefox 18- */
	opacity: 1; /*Firefox by default has an opacity object that usually is ideal to reset so it matches webkit*/
	/*styles here*/
}

input::placeholder {
	/*styles here*/
}

Example 2: placeholder css

::-webkit-input-placeholder {color: pink;} /* Chrome/Opera/Safari */
::-moz-placeholder { color: pink;} /* Firefox 19+ */
:-ms-input-placeholder { color: pink;} /* IE 10+ */
:-moz-placeholder {color: pink;}  /* Firefox 18- */

Example 3: css style placeholder

::placeholder {
  /*styles here*/
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  /*styles here*/
}

Example 4: html css placeholder input font-size

Placeholder text will automatically inherit the font family and font size of the regular input text, but you may be in a situation where you want to change the placeholder text color. You can accomplish that with the ::placeholder pseudo-element.