CSS – Placeholder style not applying if selectors are combined

Why does this work in Chrome:

.amsearch-input::-webkit-input-placeholder {
    color: red;
}

<input class="amsearch-input" placeholder="It works!" />

But not this:

.amsearch-input::-webkit-input-placeholder,
.amsearch-input::-moz-placeholder,
.amsearch-input::-ms-placeholder,
.amsearch-input::placeholder {
    color: red;
}

<input class="amsearch-input" placeholder="It fails! :(" />

>Solution :

That’s common error when trying to deal with selectors containing vendor prefixes.

The issue here is that

If there is an invalid pseudo-element or pseudo-class within in a chain or group of selectors, the whole selector list is invalid.

Source: developer.mozilla.org/en-US/docs/Web/CSS/Webkit_Extensions

There is also an article on css-tricks which you can read to get more context about this One Invalid Pseudo Selector Equals an Entire Ignored Selector

To fix it and make your code more sustainable you need to separate your rules like this:

.amsearch-input::-webkit-input-placeholder {
    color: red;
}
.amsearch-input::-moz-placeholder {
    color: red;
}
.amsearch-input::-ms-placeholder {
    color: red;
}
.amsearch-input::placeholder {
    color: red;
}