Search boxes are a common requirement in almost every website you'll create. It is very useful when users want to find certain data, it may have auto complete functions for assisting users to search.

But it this post I'll guide you on how to create an input box or TextBox with search icon in HTML and CSS.

Recently I was asked to create this search box with a style that looks like the YouTube search box. Although not exactly the same as YouTube, I still made it with the same style. This can be useful for you too if you want a search box with decent style instantly.

TextBox with Search Icon in HTML and CSS

Contents

  • 1 Step by Step HTML and CSS Search Box Guide
    • 1.1 Create the index.html with its basic structure.
    • 1.2 Add the input box inside the tag.
    • 1.3 Download a search icon.
    • 1.4 Step 4: Add a div with the image icon inside.
    • 1.5 Add the magical CSS
  • 2 Download Source Code
    • 2.1 Online Resources
    • 2.2 Share our tutorial

Step by Step HTML and CSS Search Box Guide

Create the index.html with its basic structure. 

<!doctype html> <html>     <head>         <title>TextBox with Search Icon in HTML and CSS - Tutorial from www.codeofaninja.com</title>     </head> <body>     </body> </html>

Add the input box inside the tag.

Also include the placeholder saying "Search…" and an ID of "search-text-input".

<input type='text' placeholder='Search...' id='search-text-input' />

Download a search icon.

Since we want to have a search box with search icon, download a magnifying glass icons which is a standard icon for search. It must be a transparent PNG icon. Size depends on what you need but in this example we have a 32 x 32 px icon. Put in in the same directory as the index.html.

Step 4: Add a div with the image icon inside.

The "div" tag should have an ID of "button-holder". My magnifying glass icons was named magnifying_glass.png.

<div id='button-holder'>     <img src='magnifying_glass.png' /> </div>

Add the magical CSS

We have three elements with IDs that we should style. Again, you can play or experiment with the CSS to suite your visual needs. I put the code below inside the "head" tag, after the "title" tag.

<style> #search-text-input{     border-top:thin solid  #e5e5e5;     border-right:thin solid #e5e5e5;     border-bottom:0;     border-left:thin solid  #e5e5e5;     box-shadow:0px 1px 1px 1px #e5e5e5;     float:left;     height:17px;     margin:.8em 0 0 .5em;      outline:0;     padding:.4em 0 .4em .6em;      width:183px;  }    #button-holder{     background-color:#f1f1f1;     border-top:thin solid #e5e5e5;     box-shadow:1px 1px 1px 1px #e5e5e5;     cursor:pointer;     float:left;     height:27px;     margin:11px 0 0 0;     text-align:center;     width:50px; }    #button-holder img{     margin:4px;     width:20px;  } </style>

Download Source Code

You can download all the code used in this tutorial for only $9.99 $5.55!

[purchase_link id="12487″ text="Download Now" style="button" color="green"]

Online Resources

You can also use the following resources for other techniques in doing this task.

How do I create a search button within a textbox?
search icon inside search box
TextBox with Search icon as background image

If you made other TextBox with search icon in HTML and CSS, please let us see it by dropping the demo link on the comments section below, we love to see your own creations! Thanks for visiting and take care. :)

I'm Mike Dalisay, a pro web developer since 2010. I love web development. Improving our tutorials and source codes makes me happy. Do you want to suggest an edit to our tutorial? Got something to ask about our source codes? Email our team at [email protected]

View all of Mike Dalisay's posts.