Skip to content
This repository has been archived by the owner on Oct 25, 2022. It is now read-only.

Styling :placeholder-shown does not work interoperably #8

Open
astearns opened this issue Oct 1, 2021 · 0 comments
Open

Styling :placeholder-shown does not work interoperably #8

astearns opened this issue Oct 1, 2021 · 0 comments
Labels
needstriage This bug has not been triaged yet scope-compatbugs

Comments

@astearns
Copy link

astearns commented Oct 1, 2021

Describe the issue
Trying to use :placeholder-shown to truncate placeholder text mostly works for input elements (though only Firefox shows a color change). Using it on a textarea does not work at all for truncation, and browsers disagree on which rules they apply.

Technologies Involved
CSS Selectors https://drafts.csswg.org/selectors/#placeholder

Browsers Tested
Mac Firefox, Edge, Safari

Testcase
https://codepen.io/astearns/pen/OJgGmNz

Screenshots
Mac Firefox 92, input element on top, textarea element below
image

Here white-space:nowrap does not apply. Since that does not, it can’t be determined whether text-overflow:ellipsis would have an effect

Mac Edge 94, input element on top, textarea element below
image

Here white-space: nowrap does apply, but color and text-overflow: ellipsis do not

(Chrome and Safari are similar to Edge)

Additional context
w3c/csswg-drafts#6669
https://bugzilla.mozilla.org/show_bug.cgi?id=1732267

@astearns astearns added the needstriage This bug has not been triaged yet label Oct 1, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
needstriage This bug has not been triaged yet scope-compatbugs
Projects
None yet
Development

No branches or pull requests

2 participants