A few days back, I was designing a landing page for a client. He asked me to add an animated stylish search box in that. I searched on the web, found many designs for the search box but none of them fit on my needs. So, I decided to code a stylish search box using HTML and CSS. The final output is shown in the above image. Besides this, you can also browse the demo page for its live version.
Basically, it’s a really simple search box in regards to the coding concept. But, what makes it stylish? as you have seen on the demo page, its expandable animation for search input makes it attractive. Similarly, the design is quite modern and user-friendly.
You are not limited to implement its design as it is. It can highly customize with a little bit changing in CSS values to get the desired result. OK! Let’s begin with HTML coding to build a stylish search box.
HTML for Stylish Search Box
We’ll use Google Material Icon in the search button. So, first of all, load the Material icons CSS library by adding the following CDN link inside the <head> tag of your HTML document.
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
After that, create a form with the action attribute (place search page URL). Build HTML input with type “search” and a form submit button. Place the material design icon inside the search button using the i tag. Warp all these elements into a (div) container and define its class name “searchBox”.
<div class="searchBox"> <form action="/search?"> <input class="searchInput" type="search" name="q" placeholder="Search"> <button class="searchButton" type="submit"> <i class="material-icons"> search </i> </button> </form> </div>
OK! your HTML for the search box is ready. If you want to add Font Awesome icon inside the submit button, use the <i class="fa fa-search"></i> tag.
CSS Code for Seach Box
Define some basic CSS styles for the search box container. I just keep its position to absolute and centered it using the top and left attribute to 50%. Remove the first four lines from this block to adjust it according to your own template. Similarly, you can set custom values for its background color and height attribute according to your needs.
.searchBox {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,50%);
background: #2f3640;
height: 50px;
border-radius: 50px;
padding: 10px;
}
Now we’ll use the CSS hover pseudo-selector to expand the search box on mouseover. If you want to remove this animation, just define the width property in the .searchInput selector and don’t use the below code. Anyhow, it looks cool to have this expandable animation.
.searchBox:hover > .searchInput {
width: 250px;
padding: 0 6px;
}
.searchBox:hover > .searchButton {
background: #fff;
color : #2f3640;
}
The following are some CSS styles for the search button. Keep the same height according to the searchBox height. You can customize it by changing its background color value.
.searchButton {
color: white;
float: right;
width: 50px;
height: 50px;
padding: 10px;
border-radius: 50%;
background: #2f3640;
display: flex;
justify-content: center;
align-items: center;
transition: 0.4s;
}
Define styles for search input, keep its width value to 0px (it will expand on hover). Likewise, keep the same line-heightvalue according to the .searchBox height.
.searchInput {
border:none;
background: none;
outline:none;
float:left;
padding: 0;
color: white;
font-size: 16px;
transition: 0.4s;
line-height: 50px;
width: 0px;
}
Finally, make the search box mobile friendly using CSS media queries. On mobile devices, we’ll set 150px width for the search box.
@media screen and (max-width: 620px) {
.searchBox:hover > .searchInput {
width: 150px;
padding: 0 6px;
}
}
You have done! I hope you find this tutorial helpful to create a stylish search box in HTML & CSS using our code. If you have any questions or suggestions related to the CSS search box, feel free to comment below.