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:
Syntax:
::placeholder
For Internet Explorer:
:-ms-input-placeholder
For Microsoft Edge:
::-ms-input-placeholder
Example 1: This code shows the use of ::placeholder selectors in different browsers.
HTML
<!DOCTYPE html><html> <head> <title>Change Placeholder Color</title> <style> ::placeholder { /* Firefox, Chrome, Opera */ color: blue; } :-ms-input-placeholder { /* Internet Explorer 10-11 */ color: red; } ::-ms-input-placeholder { /* Microsoft Edge */ color: orange; } </style></head> <body> <p>Change Placeholder Color</p> <input type="text" placeholder="Enter your Text"></body> </html> |
Output:
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.
HTML
<!DOCTYPE html><html> <head> <title>Change Placeholder Color</title> <style> input[type="email"]::placeholder { /* Firefox, Chrome, Opera */ color: blue; } input[type="email"]:-ms-input-placeholder { /* Internet Explorer 10-11 */ color: red; } input[type="email"]::-ms-input-placeholder { /* Microsoft Edge */ color: orange; } </style></head> <body> <p>Change Placeholder Color</p> <input type="email" placeholder="Enter your Email"></body> </html> |
Output:
Please Login to comment...