Skip to content

Instantly share code, notes, and snippets.

View murich's full-sized avatar

Andrii Murashkin murich

View GitHub Profile
@murich
murich / 0x22fcC3122073c47f5db6641940000071C4A0887c
Created October 4, 2017 04:47
0x22fcC3122073c47f5db6641940000071C4A0887c
0x22fcC3122073c47f5db6641940000071C4A0887c
0xc7C0239B5F5a36c07088c98bfBa3cfD428fbf205
@murich
murich / gist:1f2a9dd7bef4ec2671ac4e8e19978858
Created September 22, 2017 16:38
0x20dD04c55212905895C58c527ba023251877df21
0x20dD04c55212905895C58c527ba023251877df21
@murich
murich / gimmeether
Created September 7, 2017 14:33
0xd7e321b8e8cc014abe2bbb2857bec4bec03973ee
0xd7e321b8e8cc014abe2bbb2857bec4bec03973ee

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.