CSS Placeholder Color
Placeholders, those often-grayed-out text elements inside an input, can be tricky to style. Luckily, we have found a short yet effective CSS solution to style your input's placeholder text with any color and opacity you desire. Read on to get the code.
Changing placeholder text color
Let's begin with a basic input and some placeholder text. For this example, we'll use the word 'search,' but feel free to use anything you like. The fundamental HTML is below:
The placeholder text for an input (and textarea) defaults to a light gray color. However, we can modify that with a few lines of CSS. Here, we will color the input text red using an HTML color name, but any color format (HEX, RGB, HSL) will work.
It is crucial to include the various vendor prefixes to ensure support across as many browsers as possible. Only Firefox's input placeholder text defaults to a slight transparency, so setting the opacity property for IE or Chrome is not necessary.
HTML
<body>
<input placeholder="Search">
</body>CSS
::-webkit-input-placeholder { /* Chrome */
color: red;
}
:-ms-input-placeholder { /* IE 10+ */
color: red;
}
::-moz-placeholder { /* Firefox 19+ */
color: red;
opacity: 1;
}
:-moz-placeholder { /* Firefox 4 - 18 */
color: red;
opacity: 1;
}Changing placeholder focus text color
Alright, we've successfully changed the placeholder text color to red, but it would be great if something happened when a user clicks inside our input. Using the same vendor-prefixed CSS properties, we can change the opacity of the input placeholder text on focus.
In the example above, we've added a few basic styles to the input itself and a transition on the opacity to make the user experience a bit smoother. Check out the demo and feel free to experiment with other CSS properties and transitions.
CSS
input {
outline: none;
padding: 12px;
border-radius: 3px;
border: 1px solid black;
}
::-webkit-input-placeholder { /* Chrome */
color: red;
transition: opacity 250ms ease-in-out;
}
:focus::-webkit-input-placeholder {
opacity: 0.5;
}
:-ms-input-placeholder { /* IE 10+ */
color: red;
transition: opacity 250ms ease-in-out;
}
:focus:-ms-input-placeholder {
opacity: 0.5;
}
::-moz-placeholder { /* Firefox 19+ */
color: red;
opacity: 1;
transition: opacity 250ms ease-in-out;
}
:focus::-moz-placeholder {
opacity: 0.5;
}
:-moz-placeholder { /* Firefox 4 - 18 */
color: red;
opacity: 1;
transition: opacity 250ms ease-in-out;
}
:focus:-moz-placeholder {
opacity: 0.5;
}