By default, placeholder text has a light gray color.
The placeholder attribute specifies a short hint that describes the expected value of an input field in form to make provide hints for filling from.
To change the default placeholder color if form fields such as text, email, url, tel, number, textarea, password, etc you have to style the input tyle in following ways:
1. For all input type:
input::-webkit-input-placeholder {
color: #000000;
}
input::-moz-placeholder {
color: #000000;
}
input:-ms-input-placeholder {
color: #000000;
}
input:-moz-placeholder {
color: #000000;
}
2. For Input type text only:
input[type=”email”]::-webkit-input-placeholder {
color: #000000;
}
input[type=”email”]::-moz-placeholder { /* Firefox 19+ */
color: #000000;
}
input[type=”email”]:-ms-input-placeholder {
color: #000000;
}
input[type=”email”]:-moz-placeholder { /* Firefox 18- */
color: #000000;
}
Similarly, all other field placeholder color can be changed using our own custom color.
3. For textarea:
textarea::-webkit-input-placeholder {
color: #000000;
}
textarea::-moz-placeholder { /* Firefox 19+ */
color: #000000;
}
textarea:-ms-input-placeholder {
color: #000000;
}
textarea:-moz-placeholder { /* Firefox 18- */
color: #000000;
}
Note: If color of placeholder do not change try using important eg: color: #000000 !importannt;
CodeGear - Shopify, Magento, Wordpress & eCommerce Related Blog 