CSS - Placeholder style not applying if selectors area combined

Question

Why does this work in Chrome:

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

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

...but this doesn't:

.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! :(" />

Answer 1

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;
}

Answer 2

because ::-moz-placeholder or ::-ms-placeholder aren't a valid selector on chrome and chrome stop applying this styles.

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

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

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