Categories
codeofaninja.com

How To Make TextBox with Search Icon in HTML and CSS?

(adsbygoogle = window.adsbygoogle || []).push({});

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

Step by Step HTML and CSS Search Box Guide

Step 1: 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>

Step 2. 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' />

Step 3: 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>

Step 5: 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!

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. 🙂

Categories
codeofaninja.com

CSS and jQuery Sliding Drawer Navigation Tutorial

What I’m sharing with you today is a simple jQuery sliding drawer navigation tutorial whereas the sliding drawer looks like and has the same animation effect just like the Android navigation drawer.

We were able to achieve the animation effects with the help of jQuery UI. So in our code, we will see the inclusion of jQuery UI and its CSS URL.

On the webpage, there’s a trigger located on the upper left corner, that can show or hide the navigation drawer. You can absolutely customize this to look more like an Android action bar but in our example, I’ll use a very simple UI just to get you started.

jquery sliding drawer navigation tutorial

Categories
codeofaninja.com

Simple jQuery Drop Down Menu Tutorial with Source Code and Live Demo

(adsbygoogle = window.adsbygoogle || []).push({});

How are you guys? What I’m sharing today is a simple jQuery drop down menu tutorial that can help you create the simplest of its kind.

This is just to help you get started creating these types of basic website features.

I used this code when I was required to create a drop down menu on the upper right corner of the page. This is what I came up. You can easily change to CSS according to your liking.

simple jquery drop down menu tutorial

You can see the drop down menu on the upper right corner of the image above. But why not see it live? Click the link below.