In this tutorial, we will create 6 unique CSS Search box Examples with HTML which are easy to use. You will find the form code and demo as well.
All of the examples are well coded and has a nice looking design. You can easily implement it on your website and also can customize it as you want.
An input search form is an important part of any website and it makes your website user-friendly. By using the search bar, the site visitor can navigate the site quickly and search the relevant post, pages, and articles on the webpage.
However, it is important that your site should have a stylish search box that appeals to the user. This will make your site look more professional.
You know the importance of the search field, It is required for every website so the user can quickly search the content they needed. It plays a significant role in enhancing the user experience.
We can define a search box as the prime component of any website. It also improves usability among the user. The search bar is the basic need for a website that allows site users to find the specified topic and navigate through the website easily.
The search text field component frequently places next to the navigation bar. However, you can put in a sidebar or top area of the site. These are the functionality point of view advantages, but we can’t forget it’s designed, look and feel.
How to Build CSS Search Box with HTML
Let’s see how the HTML markup will look like. we have declared form tag with a class name light.
As we have included six different designs of Search bars, so you simply need to add a respective class name. In our case, I add a “light” class to form elements.
Inside the form tag, we have included a text input field and search button. Here is the HTML form code example.
<form method="post" class="light">
<input type="text" placeholder="Find on codeconvey">
<input type="submit" value="Search">
</form>
The CSS Styling
We have set the width of the form to 328px which you can increase or decrease according to your need.
To style the input field, we just add some style to input[type="text"] an element. Similar we have designed a submit button by including CSS into input[type="submit"] the element.
.light{
width:328px;
}
.light input[type="text"] {
border: medium none;
height: 45px;
padding: 5px;
width: 75%;
float:left;
}
.light input[type="submit"] {
background: none repeat scroll 0 0 #0CACE8;
border: medium none;
color: #FFFFFF;
cursor: pointer;
height: 45px;
line-height:45px;
padding: 5px;
text-transform:uppercase;
}
This is all basic explanation. You can find different variations in the demo. Download and enjoy.
So exciting