PodCode – IT-заметки

Недавно я столкнулся с таким поисковым полем на поддерживаемом мной сайте:

Картинка с лупой была определена в поле как background и, соответственно, кнопкой не являлась. Пользователь мог только вводить запрос в поле и нажимать кнопку ENTER. Нужно было исправить эту ситуацию.

Сначала на странице шаблона сайта я написал следующий код:

1
2
3
4
5
6
<div id="search_box">

    <form id="search_form" action="/search/">

        <input type="text" name="q" id="s" value="Поиск" onclick="this.value=''"/>

        <input type="image" src="find_icon.png" width="20" height="20" id="go" alt="Search" />

    </form>

</div>

Был создан отдельный блок, содержащий саму форму поиска. Оговорюсь, что сайт работает на ASP.NET MVC, и action = “/search/” обрабатывает специальный контроллер. Форма состоит из текстового поля и кнопки-изображения. Причем, при помещении курсора в поле надпись “Поиск” удаляется сама (спасибо onclick="this.value=''").

Если просмотреть страницу в браузере, получим такой результат:

Видно, что кнопка находится не в поле.

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/* search */

#search_box {

    width: 192px;

    height: 24px;

    border: 1px solid #8c8c8c;

    margin: 10px 9px;

}

#search_box #s {

    float: left;

    padding: 0;

    margin: 6px 0 0 6px;

    border: 0;

    width: 159px;

    background: none;

}

#search_box #go {

    float: right;

    margin: 3px 4px 0 0;

}

Комментарии, думаю, излишни. Смотрим в браузере:

Отлично! Кнопка кликабельна!

Скачать результат

P.S. > Данное решение работает во всех браузерах, в том числе и в IE6 (который так раздражает веб-разработчиков). Я понимаю, что можно написать (впрочем я и написал сначала) более красивый код с применением, например, jQuery, но IE6… Предлагайте ваши варианты в комментах, будет интересно сравнить.