FormsLesson 134Free preview
Fullscreen Search
This lesson is part of How To · All levels
Summary
Fullscreen search displays a large search field that covers the entire screen. This layer opens from the search button and closes with a cross button or Escape. As it acts as a dialogue, the focus must be moved to the input when opened and returned after closed.
Key points
- The overlay uses position: fixed and inset: 0 to cover the viewport.
- The input is centralized and given a large size to be easily typed.
- The opener button calls a function that displays the overlay and focuses the input.
- Escape and the shutter button hide the overlay.
- Refocus on the opener button after the overlay is closed.
Full lesson
Code examples and quizzes
Full lessons, code examples, and quizzes are available to subscribers. 5 questions.