::placeholder - Selector CSS

Description of the ::placeholder pseudo-element.

The ::placeholder pseudo-element is a selector that targets the placeholder text displayed in the input boxes.

This placeholder text is specified by the placeholder attribute of the input and textarea tags. In the case of input tags, the placeholder attribute is only taken into account for types with a free-entry field: text, number, date, etc. The placeholder text can be used to tell the user what information should be entered here or in what format it should be entered.

If the placeholder text is empty, or if there is no placeholder attribute in the input tag, the properties of ::placeholder are not applied.

The placeholder text disappears as soon as the operator enters a first character. The same is true for the effect of properties applied to ::placeholder.

::placeholder targeting placeholder text, few properties are applicable: font-related properties, color, background properties, and a few others.

There is also a pseudo-class named :placeholder-shown that targets input boxes with placeholder text.

Examples of use of ::placeholder.

The text that currently appears in the four input boxes below is the placeholder text. It disappears if you start typing, along with the formatting associated with it.

Browsers compatibility.

The pseudo ::placeholder element is properly handled by current browsers. Refer to the compatibility table below.

1

::placeholder
pseudo-element

Estimated overall support.

96%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Samsung Internet

Chrome

Edge

Safari

Firefox

Opéra

Safari sur IOS

Androïd Brower

Firefox pour Androïd

Chrome pour Androïd

KaiOS Browser

Opéra mini

See Caniuse.com for more compatibility information.

Caniuse

::placeholder pseudo-element historic.

• CSS Pseudo-Elements Module Level 4

  Regarding ::placeholder. Introduction of the ::placeholder pseudo-element.
  

  January 15, 2015

  Working Draft.

  

  

  

Other pseudo-elements.

The ::placeholder pseudo-element is presented in the CSS Pseudo-Elements Module , along with the following:

Selectors:

::after

A pseudo-element designating the location immediately after an element.

::before

A pseudo-element designating the location immediately before an element.

::details-content

This pseudo-element targets the detailed content of a details tag.

::file-selector-button

Targets the button in an input box of type file. This button has a different appearance in each browser.

::first-letter

A pseudo-element targeting the first letter of the paragraph.

::first-line

A pseudo-element targeting the first line of the paragraph.

⚠

::grammar-error

Peudo-elements targeting texts with spelling mistakes (::spelling-error) or grammar errors (::grammar-error).

::highlight()

Pseudo-element that targets the text selected after a search in the browser.

✗

::inactive-selection

Targets the selected element or text when the window it is on is not active.

::marker

A pseudo-element designating the marker in a list (bullet or number).

::placeholder

A pseudo-element designating the placeholder text in an input box (placeholder attribute).

⚠

::prefix

Target the punctuation characters that can precede the first letter of an element. Allows for a different styling of the first letter and the characters that come before it.

⚠

::search-text

Target the text searched by the internet user (browser search zone CTRL+F).

::selection

A pseudo-element that targets user-selected content.

::spelling-error

A pseudo-element that targets words or text with orthograph misspellings.

⚠

::suffix

Target the punctuation characters that may follow the first letter of an element. Allows for different styling of the first letter and the punctuation characters that follow it.

::target-text

Targets the text of the item designated by the url bookmark.