:placeholder-shown
A label that floats out of the way
CaveatThe trick needs a real placeholder attribute — even a single space — because the selector matches the placeholder being shown, not the value being empty. Drop the attribute and the label never moves.
FallbackThe label has to come after the input in the markup for the sibling selector to reach it. Order it visually with CSS, never by moving it back in the DOM.
<input placeholder=" "><label>Project</label>
/* label follows input, so + can reach it */
input:not(:placeholder-shown) + label,
input:focus + label { translate: 0 -8px; }Published