Download examples or Go back to article

Placeholder simple styling

All inputs' placeholders simple change styling, like color.

::-webkit-input-placeholder {
    color: #8A8A8A;
}
/* Firefox <18 */
:-moz-placeholder {
    color: #8A8A8A;
}
/* Firefox 19> */
::-moz-placeholder {
    color: #8A8A8A;
}
:-ms-input-placeholder {  
    color: #8A8A8A;
}

Defined inputs' placeholder styling

Styles added to inputs with defined class.

HTML:

<input type="text" name="test" placeholder="Start writing here" class="red-placeholder">

CSS:

.red-placeholder::-webkit-input-placeholder {
    color: #E30000;
}
/* Firefox <18 */
.red-placeholder:-moz-placeholder {
    color: #E30000;
}
/* Firefox 19> */
.red-placeholder::-moz-placeholder {
    color: #E30000;
}
.red-placeholder:-ms-input-placeholder {  
    color: #E30000;
}

Placeholder extreme styling :-)

There are some differences between browsers in displaying placeholders. In this example defined styles are usually not used for placeholders, however they show differences between browsers (on November 2015).

HTML:

<input type="text" name="test" placeholder="Very long placeholder is here" class="special-placeholder">

CSS:

.special-placeholder::-webkit-input-placeholder {
    color: #FFF;
	font-weight: bold;
	opacity: 0.6;
	text-decoration: underline;
	text-shadow: 2px 2px 6px #5DA1DB;
	background: #A88800;
	letter-spacing: 4px;
	font-size: 15px;
	border-radius: 5px;
	border: 2px solid #000;
	padding: 15px;
	text-overflow: ellipsis;
	-moz-transform: rotateZ(-5deg);
	-webkit-transform: rotateZ(-5deg);
	-ms-transform: rotateZ(-5deg);
	transform: rotateZ(-5deg);
}
/* Firefox <18 */
.special-placeholder:-moz-placeholder {
    color: #FFF;
	font-weight: bold;
	opacity: 0.6;
	text-decoration: underline;
	text-shadow: 2px 2px 6px #5DA1DB;
	background: #A88800;
	letter-spacing: 4px;
	font-size: 15px;
	border-radius: 5px;
	border: 2px solid #000;
	padding: 15px;
	text-overflow: ellipsis;
	-moz-transform: rotateZ(-5deg);
	-webkit-transform: rotateZ(-5deg);
	-ms-transform: rotateZ(-5deg);
	transform: rotateZ(-5deg);
}
/* Firefox 19> */
.special-placeholder::-moz-placeholder {
    color: #FFF;
	font-weight: bold;
	opacity: 0.6;
	text-decoration: underline;
	text-shadow: 2px 2px 6px #5DA1DB;
	background: #A88800;
	letter-spacing: 4px;
	font-size: 15px;
	border-radius: 5px;
	border: 2px solid #000;
	padding: 15px;
	text-overflow: ellipsis;
	-moz-transform: rotateZ(-5deg);
	-webkit-transform: rotateZ(-5deg);
	-ms-transform: rotateZ(-5deg);
	transform: rotateZ(-5deg);
}
.special-placeholder:-ms-input-placeholder {  
    color: #FFF;
	font-weight: bold;
	opacity: 0.6;
	text-decoration: underline;
	text-shadow: 2px 2px 6px #5DA1DB;
	background: #A88800;
	letter-spacing: 4px;
	font-size: 15px;
	border-radius: 5px;
	border: 2px solid #000;
	padding: 15px;
	-moz-transform: rotateZ(-5deg);
	-webkit-transform: rotateZ(-5deg);
	-ms-transform: rotateZ(-5deg);
	transform: rotateZ(-5deg);
}