Create a Search Icon Inside Input Box with HTML and CSS

Add/Create a Search Icon Inside Input Box with HTML and CSS

by

There’s hardly any website nowadays that you’ll come across which doesn’t have a search button. And it has become one of the most important elements of a website now.

Keeping a search icon inside the input box gives users a more clear idea that the input box is created for searching something. Every website has their own styles of search input boxes which we can make using HTML and CSS itself. Let’s start creating our search box.

HTML code to Add Search Icon in Input Tag:

 <div class="form-group has-search">
        <span class="fa fa-search form-control-feedback"></span>
        <input type="text" class="form-control" placeholder="Search">
 </div>

For this piece of HTML code, the output which we’ll get to see is a very simple search box like this:

Next we’ll move on to our CSS file and style our search box.

.has-search .form-control {
    padding-left: 2rem;
}
 
.has-search .form-control-feedback {
    position: absolute;
    z-index: 2;
    display: block;
    width: 2.375rem;
    height: 2rem;
    text-align: center;
    pointer-events: none;
    color: #aaa;
}

Make sure to add this link inside your tag in the html file.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

This link will fetch us the search icon, and also if you need any icon, it’s mandatory to include this in the head tag.

The output after adding css will be :

Search Box with Search Icon Inside Input Element

This is a very simple and basic search box with a search icon. You can customize the box by adding styles inside the css file according to your needs.

Hope you enjoyed this tutorial.

Leave a Comment