search box in javascript html css

Today’s concept is to create an Expanding Animated Search Box in JavaScript, HTML, & CSS. Now every website use search box, even I don’t know any website which not has a search option. In other words, the search option on any website is mandatory.

Today we will create a search box with animation effect with JQuery ( a JavaScript Library ) HTML, and CSS. This box has also an expanding effect using jquery. When you click on search icon the search box will appear. This will be a very cool effect for your website or blog.

This program is very simple and easy to understand. If you are a beginner and don’t have any knowledge about JQuery, That’s not a problem. After looking at the code program will very easy and understandable for you. Let’s take a look at this program first.

Preview Of JQuery Expanding Box

First, see a preview of this program, how its look like.

Now you can see this program visually. If you like this and want to put it on your website, the source code of this program is available below.

You May Also Like:

Animated Search Box In JavaScript HTML & CSS Source Code

Before sharing source code I want to say a little bit about this program. This animated search box in javascript program basically built-in Jquery. I say javascript in the title because JQuery is a javascript library, and I don’t have any jquery category. In the whole program, Jquery is only 5 lines.

That’s why jquery comes, to create difficult javascript program easily and quickly. I used CSS transform: rotate(-360deg); property for the animation effect. When I click on search icon box will appear and the second time I click on the same icon box will disappear. This is javascript or jquery toggleClass command. And I also used Font Awesome for creating search icon. ( Get Font Awesome ).

You have to create 3 files for this program. One for HTML, One for CSS, And One For JavaScript. To create this program follow steps given here below.

index.html

First, Create an HTML file named ‘index.html‘ and put these codes given here.

style.css

Now create a CSS file named ‘style.css’ for giving style this program. After successfully creating file put these codes.

function.js

The final thing, create a JS file named ‘function.js‘ and cope these codes from here and paste in the javascript file.

That’s It. Now you have successfully created an animated search box in JavaScript ( JQuery ) HTML and CSS. If you have any doubt or question comment down below.

Thanks For Visiting, Keep Visiting.

3 COMMENTS

  1. Shaan,

    Thank you for this, one question only as this works superbly: where do I add the code to have this search my site. I’ve added code in various places that works in other searchers, but am having no luck.

    Thank you for creating this fantastic tool.

    Wayne
    Wayne@WayneAEnglish.com

LEAVE A REPLY

Please enter your comment!
Please enter your name here