Change an HTML5 input placeholder color with CSS
The placeholder selector in the CSS pseudo-element is used to design the placeholder text by changing the text color and it allows to modify the style of the text. In most of the browsers, the placeholder (inside the input tag) is of grey color. In order to change the color of this placeholder, non-standard ::placeholder selectors can be used, which implements the color attribute in that particular selector. This selector varies from browser to browser. For eg, for Google Chrome, Mozilla Firefox, and Opera Browsers, etc, the selectors can be implemented as:
For Internet Explorer:
For Microsoft Edge:
Example 1: This code shows the use of ::placeholder selectors in different browsers.
In Google Chrome:
In Microsoft Edge:
In Internet Explorer:
Note: The placeholder selector is no longer supported by Internet Explorer.
Example 2: This code implements a placeholder selector in the email attribute of the input tag. Placeholder selectors can be applied to any attributes (text, tel, password, and etc) of the input tag, to highlight changes in color in any different attributes.