User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.13; rv:61.0) Gecko/20100101 Firefox/61.0 Build ID: 20180704003137 Steps to reproduce: I wrote the following CSS code: p, input::-webkit-input-placeholder { color: red; } (link to reproduction: https://jsfiddle.net/ClementParis016/1gc9yhxq/1/) Actual results: The CSS is not applied. Expected results: The CSS should be applied (i.e. the <p> element should have a red color). Despite the MDN docs (https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-input-placeholder) stating that the ::-webkit-input-placeholder pseudo-element is non-standard and subject to incompatibilities, it's still a perfectly valid CSS syntax that shouldn't prevent the rest of the CSS to be correctly parsed and applied to the document. For now, a work around is to separate both CSS selectors like so: p { color: red; } input::-webkit-input-placeholder { color: red; } This is especially problematic when using CSS pre-processors (like SASS or Less) and their extend features which combine together selectors that share the same rules.

That is not true. ::-webkit-input-placeholder is not a standard selector or a selector we support, so it's invalid at parse time. Invalid selectors at parse time make the whole rule invalid. For example, the rule: p, input::-webkit-input-placeholder, input::-my-random-pseudo { color: red; } Doesn't show red in any browser. Blink / WebKit have a hack where they parse any -webkit-prefixed pseudo as valid (see https://github.com/w3c/csswg-drafts/issues/2156). We may add that hack in bug 1424106... But I'd really prefer if we didn't have to. :(

Thank for your reply and the resources you provided. By valid syntax I mean it's a pseudo-element syntax (the :: part), I wasn't aware that the -webkit- prefix part was not. To add to the confusion the W3C CSS validator (https://jigsaw.w3.org/) says the code is valid but warns that "::-webkit-input-placeholder is an unknown vendor extended pseudo-element". I agree with your concerns about implementing the Blink/WebKit hack, but I'm sure a lot of people aren't even aware that the CSS gets completely ignored in Firefox :( Maybe that could be reflected into the MDN docs?

Chris, do you know if I can edit MDN to point with more emphasis in: https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-input-placeholder towards the standard ::placeholder? Or make more emphasis on invalid pseudo-elements making the whole rule invalid? Mike, looks like Edge implements ::-webkit-input-placeholder as an alias of ::placeholder, but don't implement the more general "::-webkit- pseudo-element is always valid" hack. Is there a bug on file to do the same? Should we do it? (it's a one-line change really) Thanks both!

I guess edge aliases it to ::-ms-input-placeholder, since they don't seem to support ::placeholder itself.

I think (In reply to Emilio Cobos Álvarez (:emilio) from comment #3) > Mike, looks like Edge implements ::-webkit-input-placeholder as an alias of > ::placeholder, but don't implement the more general "::-webkit- > pseudo-element is always valid" hack. Is there a bug on file to do the same? > > Should we do it? (it's a one-line change really) It sounds reasonable. I guess we should be aware we might run into new UX/a11y issues related to https://bugzilla.mozilla.org/show_bug.cgi?id=1357674 as a result. If we do this, let's make sure to document it in the compat standard as well.

(In reply to Emilio Cobos Álvarez (:emilio) from comment #3) > Chris, do you know if I can edit MDN to point with more emphasis in: > > > https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-input-placeholder > > towards the standard ::placeholder? Or make more emphasis on invalid > pseudo-elements making the whole rule invalid? Please do! Thanks Emilio.