2

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! :(" />
Black
  • 18,150
  • 39
  • 158
  • 271
  • 2
    `::-ms-placeholder` is breaking the rule. It's not the answer on why it's happening but usually it's because when a single selector fails the whole rule doesn't count. Needless to say the solution would be having separate rules each with its own selector. – Diego D Feb 22 '23 at 08:50

2 Answers2

3

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;
}
zerdox
  • 830
  • 8
  • 22
1

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! :(" />
Abbas Bagheri
  • 790
  • 5
  • 10