solvit.io

Change the color of the input and textarea placeholders

Solution

Don't group these selectors in a single CSS rule. A single invalid selector in a group invalidates the whole group (and each of these selectors is valid only in one particular browser):

*::-webkit-input-placeholder {
    color: YOUR-CUSTOM-COLOR-HERE;
}
*::-moz-placeholder {
    color: YOUR-CUSTOM-COLOR-HERE;
    opacity: 1;
}
*:-ms-input-placeholder {
    color: YOUR-CUSTOM-COLOR-HERE;
}

Some browsers apply different CSS styles for some input types (email, search). Use the appearance property to make those input types look like a normal input text field:

[type="email"], [type="search"] {
    -moz-appearance: textfield;
    -webkit-appearance: textfield;
    appearance: textfield;
}
Example
*::-webkit-input-placeholder {
    color: #53938C;
}
*::-moz-placeholder {
    color: #53938C;
    opacity: 1;
}
*:-ms-input-placeholder {
    color: #53938C;
}
Find more solutions about: , , , , ,