Problem:
You have a form that contains input fields with the placeholder. The default color of the placeholder is light gray. You need to change the color of the placeholder.
Solution:
If you want to change the color to pink, add the following code in the stylesheet.
The code:
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: pink;
}
::-moz-placeholder { /* Firefox 19+ */
color: pink;
}
:-ms-input-placeholder {/* IE 10+ */
color: pink;
}
:-moz-placeholder {/* Firefox 18- */
color: pink;
}
:placeholder-shown { /* Standard */
color: pink;
}
Explanation:
Different browsers use different pseudo-elements, pseudo-classes( like ::-moz-placeholder , ::-webkit-input-placeholder) to change the style of placeholder. To make it usable in all the browsers, all the above codes should be included.
The above code changes the placeholder color for all input types: text, search, url, tel, email, and password. If you want to change the color for
- Certain Input type: Add “input[type= “input type”]” before colon ( : ) in each of the pseudo classes. Example for email:
input[type="email"]::-moz-placeholder {}
- Textarea: Add textarea before colon( : ) in each of the pseudo classes. Like
textarea::-moz-placeholder{}
N.B: Do not group these rules. Instead, make a separate rule for every selector, because one invalid selector in a group makes the whole group invalid.