From the course: Building Great Forms with HTML and CSS

Unlock the full course today

Join today to access over 23,300 courses taught by industry experts.

Build a growing search bar

Build a growing search bar

From the course: Building Great Forms with HTML and CSS

Start my 1-month free trial Buy for my team

Build a growing search bar

“

- [Instructor] We're going to be working on our Green Bird Exotic Plant Nursery website, and this time we're going to modify the search bar, and add a little bit of interactivity. Let me show you what we'll be creating. Here's what our new search is going to look like. So when you first view the page, the search item is just a button with a search icon. If I hover or click on this area, the search bar is going to expand out, and I will have the opportunity to type some sort of value in this field. If I want to continue my search, I can either click Enter or click the button. When I hover away or click away from this item, the search component is going to shrink down to its original size. This is a very interesting space-saving technique that you can use, and it also adds a little bit of fun interactivity to our website. So this is just another option that you might want to explore for your projects. Let's look at how we…

Contents