Change an HTML5 input placeholder color with CSS
In most of the browsers, the placeholder (in input tag) is of grey color, to change the color of this placeholder, non-standard ::placeholder selectors can be used, by which implement the color attribute in that particular selector.
This selector can change browser to browser, example
For Chrome, Mozilla, and Opera Browsers, selectors can be implemented as
::placeholder
For Internet Explorer selectors can be,
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML course.
:-ms-input-placeholder
For Internet Edge, it can be,
::-ms-input-placeholder
Examples:
HTML Code 1:
This code shows the use of Placeholder selectors in different browsers
html
<!DOCTYPE html><html><head><title>Change Placeholder Color</title></head><style>::placeholder { /* Firefox, Chrome, Opera */ color: blue;}:-ms-input-placeholder { /* Internet Explorer 10-11 */ color: red;}::-ms-input-placeholder { /* Microsoft Edge */ color: orange;}</style><body> <p>Change Placeholder Color</p> <input type="text" placeholder="Enter your Text"></body></html> |
Output:
- In Google Chrome
- In Internet Edge
- In Internet Explorer
HTML Code 2:
This code implements placeholder selector in email attribute of input tag. Placeholder selectors can be apply to any attributes (text, tel, password, and etc) of input tag, to highlight change in color in any different attributes.
html
<!DOCTYPE html><html><head><title>Change Placeholder Color</title></head><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><body> <p>Change Placeholder Color</p> <input type="email" placeholder="Enter your Email"></body></html> |
Output:
Supported Browser:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Safari
