CSS Search Box With Icon Inside

Learn how to create a CSS Search box with Icon Inside. We will create three different examples of search boxes that have the icons within the input type text.

Each example clean coded and work well on desktop and as well on a mobile device. The design is also clean and modern with minimal CSS.

We know that the search boxes are most important for any type of website but at the same time they should look good and have some nice animation.

The default search form doesn’t come with any styling and it looks very basic. With the help of CSS & CSS3, we can make a basic HTML input text into Stylish Search Box Design.

We can easily make it look awesome and make it eye-catching by just adding a few lines of CSS.

Furthermore, we can add some icons to the search box button like we can apply a glass magnifying icon to make it look better.

How to Create CSS Search Box With Icon Inside

As we said earlier in the out tutorial that we have three different examples but here I will explain to you the first one only. The other examples work similar but just the HTML structure and CSS styling are different.

Let’s take a look at the markup and we will have a main wrapper called b-example-1 and inside that, we define a child class name search.

Next, we will simply place the input type text filed with some place holder text. After that, we will add a button and place the icon inside it.

We are going to use the font awesome icons that are lightweight and easy to use but you can choose anyone else.

<div class="sb-example-1">
         <div class="search">
            <input type="text" class="searchTerm" placeholder="What are you looking for?">
            <button type="submit" class="searchButton">
              <i class="fa fa-search"></i>
           </button>
         </div>
      </div>

The CSS

Our next most important step to styling the input type search box.  We will start with the wrapper and apply the 100% width. You can change it according to your needs.

The next thing we will apply the styling over the text field. We will add some border, color set the padding to make it look good.

Similar, we will do the same with the button property.

.sb-example-1 .search {
  width: 100%;
  position: relative;
  display: flex;
}
.sb-example-1 .searchTerm {
  width: 100%;
  border: 3px solid #00B4CC;
  border-right: none;
  padding: 5px;
  border-radius: 5px 0 0 5px;
  outline: none;
  color: #9DBFAF;
}
.sb-example-1 .searchTerm:focus{
  color: #00B4CC;
}
.sb-example-1 .searchButton {
  width: 40px;
  height: 50px;
  border: 1px solid #00B4CC;
  background: #00B4CC;
  text-align: center;
  color: #fff;
  border-radius: 0 5px 5px 0;
  cursor: pointer;
  font-size: 20px;
}

As we already place the icon inside the button element so we don’t need to adjust with. But in case if you want to reduce its size or want to change its color, you can easily do that by using the following class.

.sb-example-1 .searchButton i{
  color: #0052cc;
}

That’s it.