fPlaceholder is a HTML5 attribute and it is possible to change styling of this pseudo-element with CSS. It is very simple, but more advanced styling (last example) works differently between browsers. This would be useful when you are coding website or web application which graphic design requires custom styles for a placeholder or, if you want just to make something unusual in your CSS code.
Check examples below or: watch live demo
Table of Contents
CSS placeholder simple custom styling
CSS styles added to inputs with defined class.
CSS placeholder custom styles:
::-webkit-input-placeholder {
color: #8A8A8A;
}
/* Firefox <18 */
:-moz-placeholder {
color: #8A8A8A;
}
/* Firefox 19> */
::-moz-placeholder {
color: #8A8A8A;
}
:-ms-input-placeholder {
color: #8A8A8A;
}Effect:
CSS placeholder custom styles only for defined inputs
In this example we will add a custom CSS styles only to a certain inputs. So, as you might guess now, we must add a selector to this group of inputs, this can be a normal HTML class attribute.
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;
}Effect:
Placeholder extreme custom CSS styling 🙂
In most cases website placeholders are styled only with text color and sometimes also with opacity. I’ve investigated how different browsers interpret other (usually not used for placeholders) CSS properties. This results might change in the future together with browser’s development.
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);
}Effect:
