EN
CSS - change input's placeholder color
3
points
In this article, we would like to show you how to change input's placeholder color using CSS.
To get access to placeholder we should use ::placeholder presudo selector.
Quick solution
Google Chrome (and most modern browsers):
::placeholder {
color: red;
}
To have better support in older web browsers add additionally:
:-moz-placeholder { /* Mozilla Firefox 4-18 */
color: red;
opacity: 1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: red;
opacity: 1;
}
::-webkit-input-placeholder { /* Blink, WebKit, Edge */
color: red;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: red;
}
::-ms-input-placeholder { /* Microsoft Edge */
color: red;
}
Practical example
In this section, we present a runnable example of how to change input's placeholder color in Google Chrome with a legacy for older web browsers.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
::placeholder { /* Google Chrome (and most modern browsers) */
color: red;
}
:-moz-placeholder { /* Mozilla Firefox 4-18 */
color: red;
opacity: 1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: red;
opacity: 1;
}
::-webkit-input-placeholder { /* Blink, WebKit, Edge */
color: red;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: red;
}
::-ms-input-placeholder { /* Microsoft Edge */
color: red;
}
</style>
</head>
<body>
<input placeholder="Placeholder text...">
</body>
</html>
Some complex selectors
We are able to precise selectors only to specific elements, ids, classes, etc.
input::placeholder {
color: red;
}
#my-input-id::placeholder {
color: red;
}
.my-input-class::placeholder {
color: red;
}