:placeholder-shown
Published on
The :placeholder-shown pseudo-class selects <input> or <textarea> elements that are showing their placeholder text.
This is different from ::placeholder, which styles the placeholder text itself. :placeholder-shown styles the placeholder is visible. This can come in handy, as it lets us know if a user has interacted with the input.
More, :user-valid and :user-invalid were added to the spec, which helped create simpler solutions to situations we used to use :placeholder-shown for, but it can still come in handy!
For example, we can provide a subtle visual hint to users if they’ve met the requirements for a field while they are still focused on it, because :user-valid and :user-invalid wait until a user has changed focus to another element.