Заменяем кнопки форм на изображения

Сегодня в нашем блоге небольшой пост о том, как правильно и кроссбраузерно сверстать кнопку формы типа "Submit" в виде изображения. Такой прием чаще всего применяется для создания эффектных форм поиска. Верстка таких кнопок не сложна, однако есть несколько маленьких трюков, которые пригодятся каждому html-кодеру.

1. Исходный HTML- и CSS-код формы

Мудрствовать не будем и используем самое простое:

<form>
	<input id="quicksearch" /><input id="go" type="submit" />
</form>

Исходные CSS-стили тоже просты:

input#quicksearch {
	height:22px; 
	line-height:22px; 
	border:1px solid #666;
}
input#go {
}

Исходная форма выглядит так:

2. Избавляемся от текста в кнопке

input#go {
	text-indent:-9999px;
	line-height:0;
}

Большой отрицательный отступ — это известный прием, позволяющий избавиться от текста внутри элемента. Однако он совершенно не работает в IE6. Для этого мы используем нулевое line-height:

3. Добавляем изображение

Теперь, когда текст отсутствует, займемся изображением. Создадим подходящую картинку размером 22x22 — по высоте поля ввода:

input#go {
	text-indent:-9999px;
	line-height:0;
	background:url(go.png);
	height:22px;
	width:22px;
}

Получаем:

4. Финальные штрихи

input#quicksearch {
	height:22px; 
	line-height:22px; 
	border:1px solid #666;
	border-right:0;
	float:left;
}
input#go {
	text-indent:-9999px;
	line-height:0;
	border:0;
	background:url(go.png);
	height:22px;
	width:22px;
	cursor:pointer;
	float:left;
}

Несколько пояснений: свойство float позволяет выровнять оба поля по горизонтали, а cursor меняет вид курсора на привычный:

Данный код корректно и, что самое главное, единообразно отображается во всех современных браузерах, улучшая внешний вид и юзабилити ваших сайтов!

Заинтересовались? Звоните нам по телефонам +375 (29) 774-35-89 и +375 (44) 774-35-89 в Минске. Мы будем рады помочь Вам в реализации Вашего проекта.