Text Input with Expanding Bottom Border

Home » NewsBlog » Text Input with Expanding Bottom Border

Text Input with Expanding Bottom Border

Petr Gazarov published a pretty rad little design pattern in his article Text input highlight, TripAdvisor style.

Typing animation in which a yellow border matches the length of the text inside.

It’s a trick! You can’t really make an stretch like that, so Petr makes a to sync the value too, which acts as the border itself. The whole thing is a React component.

If you’re willing to use a instead, you could do the whole thing in CSS!

See the Pen Outline bottom by Chris Coyier (@chriscoyier) on CodePen.

Although that also means no placeholder.

Direct Link to ArticlePermalink


Text Input with Expanding Bottom Border is a post from CSS-Tricks

CSS Tricks Go to Source
Author: Chris Coyier

Powered by WPeMatico

2017-11-10T03:01:39+00:00