1480029 - Using ::-webkit-input-placeholder does not apply CSS rules

Status: RESOLVED DUPLICATE of bug 1424106

(Core :: CSS Parsing and Computation, defect)

Description

[clementparis016]

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.

Comment 1

[Emilio Cobos Álvarez (:emilio)]

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. :(

Comment 2

[clementparis016]

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?

Comment 3

[Emilio Cobos Álvarez (:emilio)]

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!

Comment 4

[Emilio Cobos Álvarez (:emilio)]

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

Comment 5

[Mike Taylor [:miketaylr]]

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.

Comment 6

[Chris Mills [:cmills]]

(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.