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.

Comments

Popular posts from this blog

Converting A String To Int In Groovy

"Cannot Create Cache Directory /home//.composer/cache/repo/https---packagist.org/, Or Directory Is Not Writable. Proceeding Without Cache"

Android SDK Location Should Not Contain Whitespace, As This Cause Problems With NDK Tools