user profile image

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

Forked from Chris Coyier's Pen Label Pattern with just CSS.

This Pen is a fork of Chris Coyier 's Pen Label Pattern with just CSS.

Comments

  1. No comments yet.

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.
Loading...