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

Но вернемся к нашим баранам. Сам виджет выглядит очень даже очаровательно и украсит любой блог. При некоторых знаниях CCS можно даже настроить цветовое оформление для лучшего соответствия дизайну блога.

Устанавливается виджет через стандартный элемент HTML/JavaScript. В его поле впишите обозначенный ниже код, сохраните и разместите в нужном месте шаблона. Код уже включает в себя стили CCS, поэтому никаких дополнительных манипуляций над виджетом не потребуется. Стоит сказать, что полноценно поиск отображается только в браузерах, поддерживающих CCS3, например, в IE он будет выглядеть несколько угловато, впрочем чему удивляться! Internet Explorer создан быть оригинальным. Тем не менее, даже в нем данная форма поиска выглядит достаточно симпатично:
Еще один нюанс, который хотелось бы озвучить, - при добавлении поискового запроса в поле виджета для отображения результатов поиска пользователю потребуется нажать на клавишу Enter на клавиатуре, а не стандартно на кнопку рядом с полем поиска.

Наконец, сам код виджета:

<style type="text/css">

.searchform {
 display: inline-block;
 zoom: 1; /* ie7 hack for display:inline-block */
 *display: inline;
 border: solid 1px #009980;
 padding: 3px 5px;
 -webkit-border-radius: 2em;
 -moz-border-radius: 2em;
 border-radius: 2em;
 -webkit-box-shadow: 0 1px 0px rgba(0,0,0,.1);
 -moz-box-shadow: 0 1px 0px rgba(0,0,0,.1);
 box-shadow: 0 1px 0px rgba(0,0,0,.1);
 background: #f1f1f1;
 background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
 background: -moz-linear-gradient(top,  #fff,  #ededed);
 filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie7 */
 -ms-filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie8 */
}
.searchform input {
 font: normal 12px/100% Arial, Helvetica, sans-serif;
}
.searchform .searchfield {
 background: #fff;
 padding: 6px 6px 6px 8px;
 width: 202px;
 border: solid 1px #009980;
 outline: none;
 -webkit-border-radius: 2em;
 -moz-border-radius: 2em;
 border-radius: 2em;
 -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
 -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
 box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
}
.searchform .searchbutton {
 color: #fff;
 border: solid 1px #009933;
 font-size: 11px;
 height: 27px;
 width: 27px;
 text-shadow: 0 1px 1px rgba(0,0,0,.6);
 -webkit-border-radius: 2em;
 -moz-border-radius: 2em;
 border-radius: 2em;
 background: #5f5f5f;
 background: -webkit-gradient(linear, left top, left bottom, from(#00cc00), to(#66cc00));
 background: -moz-linear-gradient(top,  #00cc00,  #66cc00);
 filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#00cc00', endColorstr='#66cc00'); /* ie7 */
 -ms-filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#00cc00', endColorstr='#66cc00'); /* ie8 */
}
</style>

<form class="searchform">
 <input class="searchfield" type="text" value="Введите запрос..." onfocus="if (this.value == 'Введите запрос...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Введите запрос...';}" />
 <input class="searchbutton" type="button" value="GO!" />
</form>

Как видите, букав довольно прилично, но все это компенсируется простотой установки и шикарным дизайном поиска.