From the course: Master Next.js by Building Scalable Apps with Routing, Databases, and Performance

Unlock this course with a free trial

Join today to access over 25,200 courses taught by industry experts.

Implementing search bar

Implementing search bar - Next.js Tutorial

From the course: Master Next.js by Building Scalable Apps with Routing, Databases, and Performance

Start my 1-month free trial Buy for my team

Implementing search bar

“

Now, let's add search icon and apply some styles to the input tag. To achieve that, I'll wrap the input tag with div and add search icon component into it. Let's create a custom class called CustomInputInGlobals.CSS. Now I will give some height with full width. Then I will add border-text-color-black, adding background-color-border-radius, padding with font-size. We will give color to the placeholder text and apply some style for focus visibility. I'll say focus visible colon outline none focus visible colon ring 2 pixel focus visible and ring neutral 400. I'll also add disabled input styles and removing shadow while hover and that's it. Now let's save the file and go to header component and replace the class by writing custom input. Let's save the code and go to the browser. You can see the style applied to the input tag. But here, search icon and input is in one column. I want to place search icon inside the input. So let's go to the header component and add styling by writing…

Contents