Search Bar CSS

We will understand the search bar in CSS in this article. Let us first understand what a search bar is.

Search Bar

The search bar is a box present on a web page that permits users to search the content on the website.

It is used to search queries. You can enter the query in the search bar and press enter.

We can create a search bar with the help of CSS, which we will understand through demonstrations.

Demonstrations of Search Bar

Let us comprehend how to create a search bar in CSS.

Demonstration 1:

We are going to construct a simple search bar in this demonstration utilizing the <input> tag for creating the input field and<button> tag for creating the submit button in front of the search bar.

Code:

Output:

Here is the output below, where we can witness a simple search bar.

Demonstration 2:

We are going to build a simple navigation bar with a search box in this illustration.

Code:

Output:

Here is the output in which we can witness the search bar inside the navigation bar.

Demonstration 3:

In this demonstration, we will construct a responsive navigation bar, which means a navigation bar that adjusts itself depending on the size of the screen. We will also add a search box inside the navigation bar.

Code:

Output:

We can clearly witness a navigation bar with a search box when the screen is full size:

If we change the size of the screen, then the navigation bar will adjust as per the screen size, which we can witness in the output below:

Demonstration 4:

We will create an animated search bar in this demonstration.

Code:

Output:

When the search bar is not clicked, then we can witness the output below:

When the search bar is clicked then, the background color of the web page changes, as we can witness below:

Demonstration 5:

We will construct an animated search box inside a navigation bar in this illustration.

Code:

Output:

Here is the output where we can witness the search box and a search icon inside the navigation bar but the search box needs to be completely visible.

When the visible part of the search box is clicked, then the search box expands, which we can witness in the output given below:

Demonstration 6:

In this demonstration, we will create an animated search bar that expands only when the search icon is pressed.

Code:

Output:

Here is the output we can witness the search bar, and when the search icon is not pressed, it will look like we can witness below:

When the search icon is pressed, then the whole search box can be witnessed below:

Demonstration 7:

In this demonstration, we will construct an animated search bar. When the search icon is pressed, the search bar appears with a cross button. If the cross button is clicked, the search box shrinks.

Code:

Output:

Here is the output we can witness the search bar, and when the search icon is not clicked, then it can be witnessed below:

When the search icon is pressed then, the search box appears with a cross button, which can be witnessed below:

Demonstration 8:

We will construct a rectangular search bar with a search icon in this demonstration and the search icon turns into an arrow when hovering.

Code:

Output:

Here in the output we can witness the rectangular search bar.

When hovering over the search icon then, it turns into an arrow, as we can witness below:

Conclusion

We have understood the search bar CSS in this article. We can construct a search bar utilizing the <input> and <button> tags and utilize CSS to give it a style. We have understood how to animate the search bar with the help of CSS.