:placeholder-shown does not mean just an empty field

Useful to know

:placeholder-shown selects input or textarea, which currently display the text on their placeholder. This is a more specific condition than "the value is empty". [1]

Example: input:placeholder-shown { border-style: dashed; }. A field without placeholder is not a suitable test for this selector. When floating a label, check a completed value, autofill, and return to an empty state. Placeholder does not replace label: it disappears when entered and is not a persistent field name. The meaning of the form must also remain clear once the user begins to write.