Css Style Placeholder Text Code Example


Example 1: css placeholder color


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

Example 2: 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 3: css style placeholder


<!DOCTYPE html>
<html lang="en">
<head>
<title>Placeholder - Style</title>
<style>
::placeholder {
color: green;
}

.force-opaque::placeholder {
opacity: 1;
}
</style>
</head>
<body>
<input placeholder="Default opacity..." />
<input placeholder="Full opacity..." class="force-opaque" />
</body>
</html>

Example 4: css style placeholder


::placeholder {
/*styles here*/
}

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

Example 5: 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 How Can I Convert A String To A Editable