CSS Stylish Search Box Design in Plain HTML

Building a creative and CSS stylish search box design with plain HTML always fun. Today, We are going to build some great ideas for search boxes.

All of these will be unique and you never ever find such design over the internet. We have created examples with demo and downloadable source.

Before we go ahead, I would like to draw your attention to our previous beautiful design CSS search boxes which also build with pure CSS and HTML.

We created 6 different ideas for material design search ba that you can implement on your website. We will guide you on how we have built such stylish search bars.

The purpose of the search box to allow the site used to search the desired content quickly. A stylish design search or checkbox input field attracts the users more to search out different things. Due to this, user engagement will increase.

The search HTML field is used by websites to make your site look better and user-friendly. If you are designing a great internet site, then you should need some good looking CSS animated search bar form on your site.

Do you own the website and you don’t have a search bar on your site ye? And, Looking for some better search forms to replace an old one?

Why not try out our this tutorial and get some great and quick examples of search forms design.  All you have to copy and paste the code to implement.

How to Build a Stylish Search Box in HTML/CSS

As I said, we have six different design for the search box and here is the HTML code of the first one.

<div class="Flatsearch">
  <input id="input" placeholder="Search..."/>
  <button id="button"><i class="fa fa-search"></i></button>
</div>
<div class="note">Click the button or hit enter.</div>

You see, we just define the main div that has an input type field and a button. Our markup is simple enough.

Apply CSS Styling

The CSS is also quite straightforward and easy to implement. We style the wrapper class .Flatsearch then do some styling on an input field and button.

Let’s have a look complete style CSS code here.

  
.Flatsearch {
    align-items: center;
    background: #8a44d5 none repeat scroll 0 0;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    margin: 12px 0;
    padding: 15px;
    transition: all 0.5s ease 0s;
}
.Flatsearch:hover, .Flatsearch:focus {
  background: #853cd3;
}
.Flatsearch button,
.Flatsearch input {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  outline: 0;
}

We show you only the first example of the CSS search box here, but you find all six instances in the demo. All the search boxes created using CSS purely.

If you like, don’t forget to share with your friends.

You May Also Like

Leave a Comment