Skip to content

Instantly share code, notes, and snippets.

Avatar

Andrey Murashkin murich

  • Ukraine
View GitHub Profile
@murich
murich / 0x22fcC3122073c47f5db6641940000071C4A0887c
Created Oct 4, 2017
0x22fcC3122073c47f5db6641940000071C4A0887c
View 0x22fcC3122073c47f5db6641940000071C4A0887c
0x22fcC3122073c47f5db6641940000071C4A0887c
@murich
murich / gist:1f2a9dd7bef4ec2671ac4e8e19978858
Created Sep 22, 2017
0x20dD04c55212905895C58c527ba023251877df21
View gist:1f2a9dd7bef4ec2671ac4e8e19978858
0x20dD04c55212905895C58c527ba023251877df21
@murich
murich / gimmeether
Created Sep 7, 2017
0xd7e321b8e8cc014abe2bbb2857bec4bec03973ee
View gimmeether
0xd7e321b8e8cc014abe2bbb2857bec4bec03973ee
View Label-Pattern-with-just-CSS.markdown

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.

You can’t perform that action at this time.