How to change the color of input or select or textarea placeholder in CSS
Category: CSS
The placeholder attribute specifies a brief hint that describes the mean value of AN input field. The short hint is displayed within the input field before the user enters a value.
By default the HTML input/select/textarea placeholder text has a light gray color, To style it, you need to apply CSS properties.
In order to change the default placeholder color, you should perform the following:
1. The following code will change all placeholder's color for input areas (it applies the same color for all inputs):
input::-webkit-input-placeholder {
color: orange !important;
}
input:-moz-placeholder { /* Firefox 18- */
color: orange !important;
}
input::-moz-placeholder { /* Firefox 19+ */
color: orange !important;
}
input:-ms-input-placeholder {
color: orange !important;
}
2. The following code will change the placeholder color specifically for a certain input type, in our case email:
Note: as per requirement we need to change the input type to apply for that particular input type.
input[type="email"]::-webkit-input-placeholder { color: blue !important;
}
input[type="email"]:-moz-placeholder { /* Firefox 18- */
color: blue !important;
}
input[type="email"]::-moz-placeholder { /* Firefox 19+ */
color: blue !important;
}
input[type="email"]:-ms-input-placeholder {
color: blue !important;
}
3. The following code will change the all placeholder's color for text areas (it apply's same color for all textarea placeholder):
textarea::-webkit-input-placeholder {
color: crimson !important;
}
textarea:-moz-placeholder { /* Firefox 18- */
color: crimson !important;
}
textarea::-moz-placeholder { /* Firefox 19+ */
color: crimson !important;
}
textarea:-ms-input-placeholder {
color: crimson !important;
}
3. The following code will change the all placeholder's color for text areas (it apply's same color for all select placeholder):
select::-webkit-input-placeholder {
color: deeppink !important;
}
select:-moz-placeholder { /* Firefox 18- */
color: deeppink !important;
}
select::-moz-placeholder { /* Firefox 19+ */
color: deeppink !important;
}
select:-ms-input-placeholder {
color: deeppink !important;
}
Drop Your Feedback at: info@webartise.com