CSS ::placeholder Selector

The placeholder selector in the CSS pseudo-element is used to design the placeholder text by changing the text color and it allows to modification the style of the text.

The ::first-line pseudo-element is the only subset of CSS properties that is applicable & can be applied in a rule using ::placeholder in its selector. By default, the placeholder text appearance is a translucent or light gray color for most browsers.

Syntax:

::placeholder {
 // CSS property
}

We will understand the concept of ::placeholder selector & its implementation through the examples.

Example 1: This example illustrates the ::placeholder selector for changing the text color along with the background color for the placeholder text.

Output:

👁 Image

Example 2: This example illustrates the ::placeholder selector for setting up the placeholder text with its attribute that identifies the hint which describes the expected value of an input field.

Output:

👁 Image

Supported Browser: The browser supported by ::placeholder selector are listed below:

• Google Chrome 57.0
• Microsoft Edge 79.0
• Firefox 51.0
• Safari 10.1
• Opera 44.0