CSS ::placeholder Selector

Change the color of the placeholder text of an input field:

::-ms-input-placeholder { /* Edge 12-18 */
color: red;
}

::placeholder {
color: red;
}

Definition and Usage

The ::placeholder selector selects form elements with placeholder text, and let you style the placeholder text.

The placeholder text is set with the placeholder attribute, which specifies a hint that describes the expected value of an input field.

Tip: The default color of the placeholder text is light grey in most browsers.

The numbers in the table specify the first browser version that fully supports the selector.

Numbers followed by -webkit-, -moz- or -ms- specify the first version that worked with a prefix.

Selector
::placeholder	57.0 6.0 -webkit-	79.0 12.0 -ms-	51.0 4.0 -moz-	10.1 5.0 -webkit-	44.0 15.0 -webkit-

::placeholder {
css declarations;
}