Skip to content

Instantly share code, notes, and snippets.

View murich's full-sized avatar

Andrii Murashkin murich

View GitHub Profile

Label Pattern with just CSS

The <label> is the placeholder. It shows because the input is on top of it with a transparent background. On focus we can move it, with just CSS, through an adacent sibling combinator and :focus. If the input is :valid, it can have a solid background, thus hiding the "placeholder".

Saw the design somewhere - can't remember where, but I snagged a screenshot:

img

A Pen by A Non Ymous on CodePen.