Сегодня решил создать простенькую форму поиска:
Результат можно посмотреть вот ТУТ
Вставляем куда хотим код html:
Code
<form action="/news/" id="poisk" method="post">
<div style="position:relative;">
<input type="text" name="query" id="forma" value="search..." onfocus="if(this.value=='search...')this.value=''" onblur="if(this.value=='')this.value='search...'"/>
<input class="knp" name="sfSbm" type="submit" value="" />
<input name="a" value="14" type="hidden">
</div>
</form>
И вставляем в Таблицу стилей CSS:
Code
#poisk {
background:url(http://s49.radikal.ru/i125/1006/50/fad163a62944.png) no-repeat;
width:260px; /* ширина */
height:40px; /* Высота */
padding-top:10px; /* смещаем всё что внутри в низ, чтобы было ровно */
}
#forma {
background:none; /* убираем белый фон */
font-size:14px; /* размер шрифта */
font-family:Arial; /* Шрифт */
font-weight: bold;
color:#FFFFFF; /* цвет шрифта */
margin-left:15px; /* смещаем в право слово search */
border:none; /* убираем обводку */
}
.knp {
background:url(http://s52.radikal.ru/i135/1006/98/840ee36abf97.png) no-repeat;
width:60px;
height:60px;
border:none; /* убираем обводку */
position:absolute; /* для того чтобы можно было сместить вверх */
top:-20px; /* Смещаем вверх кнопку с лупой */
margin-right:auto;
}
.knp:hover {
background:url(http://s52.radikal.ru/i135/1006/98/840ee36abf97.png) 0px -60px no-repeat;
cursor:pointer; /* курсор в виде руки */
}
