FormsLesson 132Free preview
Animated Search
This lesson is part of How To · All levels
Summary
An animated search is a search field that expands when focused or clicked. The effect is made by transitioning the width property, so the change in size feels subtle. This pattern saves space on the navigation bar without eliminating the search function.
Key points
- Transition: width makes the width change smoothly.
- The :focus or :focus-within selector triggers the input expansion.
- A small initial width can open up space for other elements.
- The search icon button still needs the aria-labels.
- Do not hide input with display: none because it eliminates keyboard access.
Full lesson
Code examples and quizzes
Full lessons, code examples, and quizzes are available to subscribers. 5 questions.