::placeholder Pseudo-Element

The ::placeholder pseudo-element selector is used to style the placeholder text of HTML text input controls that have the placeholder attribute.

With the ::placeholder pseudo-element, you can customize the placeholder text's color, font, size, weight, horizontal alignment, and more.

Note:
When you add the placeholder attribute to an HTML text input control, it provides a visual hint as text inside the input field to indicate what kind of input is expected when the field is empty. This hint text is called the placeholder text.

Basic Example

HTML 
<input type="text" placeholder="placeholder text">
CSS 
input::placeholder {
    color: red;
    font-size: 1.2em;
    font-style: italic;
    font-weight: bold;
    text-align: center;
}
Rendered Output

Note:
The default color of placeholder text is usually a light gray in most browsers.

The ::placeholder pseudo-element only styles the placeholder text while it is visible. In the example above, the placeholder text is also horizontally centered. Once the user enters text into the input field, the ::placeholder styling no longer applies.

The syntax for the ::placeholder pseudo-element is as follows:

Syntax

CSS 
::placeholder {
    /* CSS properties */
}

Supported CSS Properties for ::placeholder

Caution:
The list of supported CSS properties is not exhaustive and may vary between browsers. Because browser implementations differ, the CSS specification does not strictly define which properties must be supported on ::placeholder.

  • Font-related properties
  • color
  • Background-related properties
  • text-align
  • word-spacing
  • letter-spacing
  • opacity
  • And others...

Opacity Adjustment in Firefox

Some browsers, especially Firefox, set the placeholder text's default opacity value to less than 1, making it partially transparent. To make the placeholder text fully opaque, explicitly set the opacity value to 1:

CSS 
::placeholder {
    opacity: 1;
}
Rendered Output

Browser compatibility

Browser Compatibility for the ::placeholder Pseudo-Element
Selector
Desktop Chrome
Chrome
DesktopDesktop Edge
Edge
Desktop Firefox
Firefox
Safari
Safari
::placeholder 57 79 51 10.1

Specifications

Specification Details for the ::placeholder Pseudo-Element
Specification
::placeholder CSS Pseudo-Elements Module Level 4
#placeholder-pseudo

References

See also