Skip to content

Instantly share code, notes, and snippets.

Andrey Murashkin murich

  • Ukraine
Block or report user

Report or block murich

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
murich / 0x22fcC3122073c47f5db6641940000071C4A0887c
Created Oct 4, 2017
View 0x22fcC3122073c47f5db6641940000071C4A0887c
murich / gist:1f2a9dd7bef4ec2671ac4e8e19978858
Created Sep 22, 2017
View gist:1f2a9dd7bef4ec2671ac4e8e19978858
murich / gimmeether
Created Sep 7, 2017
View gimmeether
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:


A Pen by A Non Ymous on CodePen.

You can’t perform that action at this time.