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 →

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.