Сегодня я расскажу, как использовать фоновые изображения в CSS для оформления окна поиска. Раньше я использовал другие методы для реализации своей формы и окна поиска, но этот метод показался мне проще, поэтому я решил поделиться им со всеми, кому это интересно.
Посмотреть
исходный метод демо-версии Сначала давайте посмотрим на мой оригинальный метод использования <input type="image" src="image_url" />:
<form метод="get" id="searchform" action=" http:/ / www.sohtanaka.com/ ">
<набор полей>
<input type="text" value="" name="s" id="s" />
<input type="image" src="img_url" id="searchsubmit" value="Search" class="btn" />
</fieldset>
</form>Выглядит хорошо, но есть обратная сторона: кнопка изображения не совпадает с полем поиска. Чтобы исправить эту ошибку, мне пришлось использовать отрицательный атрибут поля.
исходного метода
. В этой улучшенной версии метода я решил не использовать type="image", а использовать тег <button>, а затем добавить фон с помощью CSS. Это позволяет полям ввода текста и кнопкам автоматически выравниваться. Я также добавил псевдокласс :focus к конечному эффекту (IE не поддерживает это, поэтому я добавил специальный стиль для IE, чтобы скрыть этот эффект). Вот некоторые преимущества этого подхода:
Естественное выравнивание с использованием только одного изображения для кнопок и полей ввода.
Псевдокласс :focus поддерживает браузеры, добавляющие к кнопкам эффекты наведения.
HTML
<form метод="get" id="searchform" action=" http://www.sohtanaka.com/ ">
<fieldset class="search">
<input type="text" class="box" />
<button class="btn" title="Отправить поиск">Поиск</button>
</fieldset>
</form>CSS
fieldset.search {
граница: нет;
ширина: 243 пикселей;
маржа: 0 авто;
фон: #222;
}
Ввод .search, кнопка .search {
граница: нет;
плавать: влево;
}
.search input.box {
цвет: #fff;
размер шрифта: 1.2em;
ширина: 190 пикселей;
высота: 30 пикселей;
отступ: 8 пикселей 5 пикселей 0;
фон: #616161 URL(search_bg.gif) без повтора;
поле справа: 5 пикселей;
}
.search input.box:focus {
фон: #616161 URL(search_bg.gif) без повтора слева -38 пикселей;
контур: нет;
}
.search button.btn {
ширина: 38 пикселей;
высота: 38 пикселей;
курсор: указатель;
текстовый отступ: -9999 пикселей;
фон: #fbc900 url(search_bg.gif) без повтора вверху справа;
}
.search button.btn:hover {
фон: #fbc900 url(search_bg.gif) без повтора внизу справа;
}Специальные комментарии IE
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->IE style-ie.css
Друг заметил, что IE6 и IE7 будут прокручивать фоновое изображение по горизонтали, если вы вводите слишком много текста, поэтому я решил использовать отдельное фоновое изображение специально для IE, и вместо того, чтобы выравнивать его по левому краю, я перевернул его и выровнял фон. изображение справа, чтобы исправить это.
.search input.box {
фон: URL(search_bg_ie.gif) без повтора справа внизу;
/* Независимое фоновое изображение специально для IE, и это изображение должно быть выровнено по правому краю. ***/
}