Основное меню

Оформление формы поиска при помощи CSS

Первым делом нам нужно создать форму, в которой будет размещаться текстовое поле и кнопка.

<form action="search.php" method="post">
<input type="text" id="number" name="number" value="" maxlength="15">
<input type="submit" id="btn" value=""></a>
</form>

Следующим шагом будет оформление формы при помощи CSS, код стилей смотрите ниже:

#number {
float: left;
height: 14px;
padding: 2px 8px;
width: 105px;
border: 0px;
margin: 2px 0px 0px 12px;
font: normal 11px Verdana;
color: #999;
background: url(images/entertext.PNG) no-repeat;

}
#btn,
#btn:hover,
#btn:active,
#btn:focus {
float: left;
margin-left: 7px;
border: 0px;
width: 23px;
height: 22px;
outline:none;
background: url(images/push.PNG) no-repeat;
}

Оформление формы поиска на этом законченно, исходные файлы можно скачать ниже.

Скачать файл
размер файла: 26,34 Kb
cкачиваний: 165

Раздел: Статьи для веб-мастера




Дополнительно Популярное
Дизайнерский веб-ресурс: Дле, Вордпресс, Джумла, фотошоп, плагины, иконки, шаблоны, текстуры, смайлики, логотипы.