Вы, должно быть, читали мою недавнюю заметку об экранных формах. Сейчас я хотел бы реализовать одну из тех рекомендаций на практике и привести свой пример формы поиска.

Поиск встречается едва ли на каждом сайте, на некоторых предлагается к текстовому полю фильтр в виде <select>. Этот элемент выглядит в браузерах по-разному и, возможно, совсем не вписывается в дизайн вашего сайта. Существуют специальные плагины для его стилизации, но они не всегда оправданы. Я решил визуально объединить его с текстовым полем с помощью jQuery.

Разметка страницы

Разметка стандартна, ничего лишнего. Необычным может показаться расположение выпадающего списка перед текстовым полем, но так оказалось проще выровнить.

<div id="search">

<form action="" >
           
<select name="where">
	<option value="any">Везде</option>
	<option value="photo">Фотографии</option>
	<option value="audio">Музыка</option>
	<option value="video">Видео</option>		
	<option value="users">Пользователи</option>		
</select>
	
<input type="text" name="search" value="" maxlength="30" class="searchText"  />
<input type="submit" name="" value="Найти" class="searchSubmit"  />
	
</form>

</div>

jQuery

(function ($) {

    $(document).ready(function () {

        var $select = $('#search select');

        // Инициализируем дополнительные элементы

        var $selectBoxContainer = $('<div>', {
            className : 'searchSelect',
            html : '<div class="selectBox"><b></b></div>'
        });

        var $dropDown = $('<ul>', {
            className : 'dropDown'
        });

        var $selectBox = $selectBoxContainer.find('div.selectBox');

        // Добавляем элементы исходного списка в созданный ul

        $select.find('option').each(function (i) {

            var $option = $(this);

            if ($select.attr('selectedIndex') == i) {
                $selectBox.children('b').html($option.text());
            }

            var $li = $('<li>', {
                html : $option.text(),
                click : function () {

                // Имитируем поведение select и изменяем его значение
                $selectBox.children('b').html($option.text());
                $dropDown.trigger('hide');
                $select.val($option.val());

            }
            });

            $dropDown.append($li);
        });

        $selectBoxContainer.append($dropDown.hide());
        $select.hide().after($selectBoxContainer);

        // Пользовательские события для ul списка

        $dropDown.bind('show', function () {

            if ($dropDown.is(':animated')) {
                return;
            }

            $selectBox.addClass('expanded');
            $dropDown.slideDown(200);

        }).bind('hide', function () {

            if ($dropDown.is(':animated')) {
                return;
            }

            $selectBox.removeClass('expanded');
            $dropDown.slideUp(200);

        }).bind('toggle', function () {
            if ($selectBox.hasClass('expanded')) {
                $dropDown.trigger('hide');
            } else
                $dropDown.trigger('show');
        });

        $selectBox.click(function () {
            $dropDown.trigger('toggle');
            return false;
        });

        // Свернем список, если ничего не выбрано

        $(document).click(function () {
            $dropDown.trigger('hide');
        });
    });

})(jQuery);

На основе <select> скрипт сгенерирует <ul> список, который будет его имитировать. div.selectBox отображает текущее значение выбранного элемента списка, ul.dropDown предлагает выбрать другие значения.

<div class="searchSelect">
	<div class="selectBox"><b>Фотографии</b></div>
	<ul class="dropDown">
		<li>Везде</li>
		<li>Фотографии</li>
		<li>Музыка</li>
		<li>Видео</li>
		<li>Пользователи</li>
	</ul>
</div>

Исходный <select> является скрытым, его значение изменяется автоматически при выборе пункта <li>

CSS

div.selectBox позиционирован абсолютно и располагается поверх текстового поля. Необходимо установить ему ширину и выровнять относительно левого края <input>. Аналогично и с ul.dropDown.

#search {
	position: relative;
	display: block;
}

#search input {
	vertical-align: middle;
	outline: none;
	font-size: 14px;
}

#search .searchText {
	width: 360px;
	-moz-border-radius: 4px;
	border-radius: 3px;
	height: 28px;
	line-height: 28px;	
	border: 0px none;
}

#search input.searchSelect {
	display: block;
	position: absolute;
}

#search div.selectBox {
	font-size: 14px;
	position: absolute;
	margin-left: 240px;
	width: 120px;
	color: #666666;
	cursor: pointer;
	text-align: right;
	font-style: normal;
	background: url(../img/search_icon_down.png) no-repeat 100% 10px;
	height: 28px;
	line-height: 28px;
}

#search div.selectBox b {
	padding-right: 15px;
	font-weight: normal;
}

#search div.selectBox:hover,#search div.expanded {
	color: #2c5667;
}

#search ul.dropDown {
	position: absolute;
	font-style: normal;
	color: #777777;
	top: 31px;
	left: 239px;
	width: 120px;
	border: 1px solid #32333b;
	border-width: 0 1px 1px;
	list-style: none;
	-moz-box-shadow: 0 0 2px #111;
	-webkit-box-shadow: 0 0 2px #111;
	box-shadow: 0 0 2px #111;
	background-color: #fff;
	font-size: 12px;
	z-index: 10;
}

#search li {
	padding: 5px;
	cursor: pointer;
	position: relative;
}

#search li:hover {
	background-color: #eee;
}

#search .searchSubmit {
	display: inline-block;
	padding: 0 10px;
	color: #44452f;
	font-size: 14px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	text-shadow: 0px 1px 1px #fefad8;
	filter: dropshadow(color = #fefad8, offx = 0, offy = 1);
	position: relative;
	cursor: pointer;
	border: none;
	background: #fff url("../img/btn_overlay.png") repeat-x;
	height: 28px;
	line-height: 28px;	
}

#search .searchSubmit:hover,#search .searchSubmit:focus,#search .searchSubmit:active {
	outline: none;
	opacity: 0.8;
	-khtml-opacity: .8;
	-moz-opacity: 0.8;
}

Итак, все готово. Можете смело использовать такую форму на своих сайтах.

Пример
Скачать