An Interest In:
Web News this Week
- April 2, 2024
- April 1, 2024
- March 31, 2024
- March 30, 2024
- March 29, 2024
- March 28, 2024
- March 27, 2024
November 9, 2017 11:56 pm GMT
Original Link: https://medium.freecodecamp.org/text-input-highlight-tripadvisor-style-2a44477de1b2
Text Input with Expanding Bottom Border
Petr Gazarov published a pretty rad little design pattern in his article Text input highlight, TripAdvisor style.
It's a trick! You can't really make an <input>
stretch like that, so Petr makes a <span>
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 <span contenteditable>
instead, you could do the whole thing in CSS!
See the Pen Outline bottom by Chris Coyier (@chriscoyier…
Text Input with Expanding Bottom Border is a post from CSS-Tricks
Original Link: https://medium.freecodecamp.org/text-input-highlight-tripadvisor-style-2a44477de1b2
Share this article:
Tweet
View Full Article