The ::placeholder selector in CSS is used to add styles to the placeholder text of the form elements. The default color of the placeholder text for most of the browsers is light grey.
We can easily change this default light grey color as well as other default properties with the help of the ::placeholder selector.
See the below example, where we have set the placeholder text color to hotpink:
Example:
::placeholder {
color: hotpink;
}
Most of the modern browsers directly support the above syntax of the ::placeholder. But for some browsers or the older browser versions, you have to use the vendor prefixes.
Here is an example:
Example:
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: hotpink;
}
::-moz-placeholder { /* Firefox 19+ */
color: hotpink;
}
:-ms-input-placeholder { /* IE 10+ */
color: hotpink;
}
:-moz-placeholder { /* Firefox 18- */
color: hotpink;
}
You can add other styles also such as font-size, font-style, opacity, text-transform, etc.
See the below example:
Example:
::placeholder {
color: hotpink;
font-size: 1.1em;
font-style: italic;
text-transform: capitalize;
opacity: 0.9;
}
Please note that not all the properties can be used with the ::placeholder selector.
Below is the list of the properties that can be used with the ::placeholder –
- font properties
- background properties
- color
- word-spacing
- letter-spacing
- text-decoration
- vertical-align
- text-transform
- line-height
- text-indent
- opacity
The ::placeholder supports most of these properties. However, it might vary based on the user agent you are using.
CSS Syntax
The syntax of the ::placeholder selector is as follows:
::placeholder{
CSS Styles;
}
Browser Support
The number in each cell of the table specifies the first version of the browser that fully supports the ::placeholder selector.
| Selector | |||||
| ::placeholder | 57.0 | 12.0 (-webkit-) | 51.0 | 10.1 | 44.0 |
