[css-selectors-4] [css-pseudo-elements-4] ::placeholder and :placeholder-shown should explicitly apply to textarea elements

[astearns]

The MDN documentation for ::placeholder and :placeholder-shown mention that they apply to textarea and input elements:

https://developer.mozilla.org/en-US/docs/Web/CSS/::placeholder
https://developer.mozilla.org/en-US/docs/Web/CSS/:placeholder-shown

The textarea element is not mentioned in either spec section for these:

https://drafts.csswg.org/css-pseudo/#placeholder-pseudo
https://drafts.csswg.org/selectors/#placeholder

As far as implementations go, ::placeholder appears to work with textareas, but :placeholder-shown has issues.

https://codepen.io/astearns/pen/zYzLaOL

In Mac Firefox, it looks like :placeholder-shown on textareas allows the same properties as ::placeholder (those limited to ::first-line), so you can’t do things like truncate the placeholder text with an ellipsis. In Chrome and Safari, it does not appear to work with textareas at all.

I suggest that we specify what MDN documents (both ::placeholder and :placeholder-shown should work with textarea). This would be specifying reality with regard to ::placeholder, and if that’s acceptable then :placeholder-shown should match.

[emilio]

In Mac Firefox, it looks like :placeholder-shown on textareas allows the same properties as ::placeholder (those limited to ::first-line), so you can’t do things like truncate the placeholder text with an ellipsis. In Chrome and Safari, it does not appear to work with textareas at all.

:placeholder-shown is a pseudo-class, not a pseudo-element, so it accepts the same properties as any other selector, nothing specific to ::placeholder. However white-space: nowrap on a textarea's placeholder does nothing, because of this rule. That comes from this commit that changed it to be !important.

It seems that was done because of implementation issues, so I don't think it should matter anymore, I'll try to lift this restriction.

Edit: https://bugzilla.mozilla.org/show_bug.cgi?id=1732267

[fantasai]

@astearns I don't think the CSS specs need any edits here, so let me know if we can close out this issue!

[astearns]

@fantasai I do not think it is clear in the CSS specs that these both have effects on textarea elements as well as input elements. I’d like both sections to at least mention the textarea element.

[fantasai]

@astearns I've added TEXTAREA to the example in Selectors 4 and copied it over into the Pseudo-Elements spec as well. Is this enough to close the issue?

[astearns]

Yes. Thanks!