Поиск очень стильный и подойдёт к любому шаблону.
При навождении на него он будет раздвигаться, как это показано на экране.
УСТАНОВКА
вставляем куда вам нужно

Code

<style> <br> #wrap-search { <br> margin: 0 auto; <br> width: 100px; <br> -moz-transition: all .2s ease-out; <br> -webkit-transition: all .2s ease-out; <br> -o-transition: all .2s ease-out; <br> transition: all .2s ease-out; <br> text-indent: 0px;} <br><br> #wrap-search br { display: none; } <br><br> #wrap-search #search { <br> background: -moz-linear-gradient(center bottom , #9B9B9B 0%, #A9A9A9 50%, #CACACA 50%, #D3D3D3 2550%); <br>
  background: -webkit-gradient(linear,left bottom,left top,color-stop(0,  
#9B9B9B),color-stop(0.5, #A9A9A9),color-stop(0.5,  
#CACACA),color-stop(25.5, #D3D3D3)); <br> filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#9B9B9B', EndColorStr='#CACACA'); <br> border-radius: 5px; <br> padding: 4px; <br> } <br><br> #wrap-search:hover { width:200px; } <br><br> .form-search { <br> background: -webkit-gradient(linear, 0 bottom, 0 top, from(#EBEBEB), to(#BCBCBC)); <br> background: -moz-linear-gradient(-90deg, #BCBCBC, #EBEBEB); <br> filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#EBEBEB', EndColorStr='#BCBCBC'); <br> border: 1px solid #747474; <br> border-radius: 3px; <br> box-shadow: inset 0 1px 1px #575555, 0 1px 0 #FFF; <br> height: 32px; <br> position: relative; <br> -moz-transition: all .2s ease-out; <br> -webkit-transition: all .2s ease-out; <br> -o-transition: all .2s ease-out; <br> transition: all .2s ease-out; <br> } <br><br> .form-search input[type='text'] { <br> background: none; <br> border: none; <br> color:#6E7074; <br> height: 34px; <br> line-height: 34px; <br> padding: 0 27px 0 6px; <br> font-family: Helvetica, Arial, sans-serif; <br> font-size: 13px; <br> text-shadow: 0 1px 0 #FFF; <br> } <br><br> #wrap-search:hover input[type='text'] { color:#597C84; } <br><br> #wrap-search:hover .form-search { <br> background: -moz-linear-gradient(-90deg, #9CC2CA, #DFECEF); <br> background: -webkit-gradient(linear, 0 bottom, 0 top, from(#DFECEF), to(#9CC2CA)); <br> filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#DFECEF', EndColorStr='#9CC2CA'); <br> box-shadow: inset 0 1px 1px #46575b, 0 1px 0 #FFF; <br> color: #25464D; <br> } <br><br> .form-search input[type='image'] { <br> height: 32px; <br> opacity: .5; <br> filter:alpha(opacity=50); <br> position: absolute; <br> right: 0px; <br> top: 0px; <br> width: 32px; <br> } <br><br> .form-search input[type='image']:hover { <br> opacity: 1; <br> filter:alpha(opacity=100); <br> } <br><br> </style> <br><br> <div id="wrap-search"> <br> <div id="search"> <br> <form class="form-search" method="get" action="/search" target="_blank"> <br> <input src="http://more-kino.at.ua/_ph/1/2/862330529.png" type="image"> <br>
  <input name="q" value="поиск" onfocus="this.value='';"  
onblur="this.value='поиск';" onmouseover="this.value='';"  
onmouseout="this.value='поиск';" type="text"> <br> </form> <br> </div> <br> </div><br>