Adaptive Placeholders

See the Pen Adaptive Placeholder by Danny King on CodePen.

We’ve seen some floated labels before: when focussing a form field the placeholder seems to move towards a spot above the field.

Adaptive placeholders goes a step further by also allowing one to change the text when something was entered into the field.

Makes clever use of pointer-events: none;, the :valid psuedo-selector, and the adjacent sibling selector (viz. +).

Adaptive Placeholders →

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Join the Conversation

1 Comment

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.