Stylish Search bar example using jQuery

Stylish Search bar example using jQuery html and CSS it use jQueary online CDN for including jquery and use simple hide and show functions.

Download Code

Test here:

---

HTML Code:

---

<div class="main">

<img src="logo.png" id="display" />

<div class="search_bar" id="search">

<div class="box"><input type="text" placeholder="Search..." ></div>

<div class="btn"><input type="image" src="logo.png" alt="submit"></div>

</div>

</div>

---

JQuery Code:

---

<script>

$(document).ready(function(){

$("#display").click(function(){

$(this).hide();

$("#search").show();

});

$("#search").click(function(){

$(this).hide();

$("#display").show();

});

});

</script>

---

CSS code:

---

<style>

body{background-color:#eee;}

#display{height: 50px;width: 50px;border: 1px solid blue;border-radius: 10px;box-shadow: 2px 2px 10px skyblue;cursor:pointer;}

#search{padding: 10px;display: none;}

#search .box{float: left;}

#search input{height: 50px;box-shadow: 2px 2px 10px blue;}

#search input[type=image]{height: 42px;background-color: skyblue;border: 4px;border-style: solid;border-color: black;border-left: 0px;}

#search input[type=text]{padding: 12px;border: 4px;border-style: solid;border-color: black;border-right: 0px;}

.main{width:30%;margin:10% auto ;height:10%;box-shadow: 2px 2px 10px skyblue;padding:20px;background-color:#aaa;}

</style>