Этим постом я начинаю новую рубрику «Уроки и приемы», где буду делиться с вами приемами, методами и трюками верстки.
Начнем с простого, но эффектного приема — создание нестандартной формы поиска. Возьмем вот такую симпатичную форму.
Сам код формы, в общем-то, стандартный, но с небольшой добавкой js для удобства.
<div class="search">
<form action="#" method="get">
<fieldset>
<input name="text" type="text" value="Что будем искать?" />
</fieldset>
</form>
</div>
DIV-ом я обернул здесь для удобства, а аттрибуты onfocus и onblur с js не дают исчезнуть надписи «Что будем искать?».
Рассмотрим теперь оформление:
.search {background: url(search.gif) no-repeat; margin: 40px auto; height: 19px; width: 165px;}
.search input {background: none; border: none; color: #8a8989; font: 9pt Tahoma, Arial, sans-serif; padding-left: 38px;}
Класс search задает основной внешний вид формы. С помощью свойства background мы подкладываем картинку формы поиска, а свойствами height и width задаем габариты формы.
Далее определяются стили уже самой строки ввода. Свойство background убирает стандартный фон, а border убирает границы формы. Таким образом, мы полностью вычистили стандартную форму. Теперь свойствами color и font определяем шрифт для строки поиска и задаем отступ для курсора на 38px (padding-left), чтобы убрать его с картинки.
Смотрите рабочий пример.
Как видите, ничего сложного, рекомендую самостоятельно поэкспериментировать.
Как то все скучно. Картинку наложить на инпут... тююю
Вот лучше бы способ как кроссбраузерно изменить до не узнаваемости select вот это да! Это б я почитал!
Поддержу Васю... Про кастумный select... от профессионалов Дзен Верстки...в студию... а то ну блин детский сад
А я б почитал про TDO Mini Forms Как правильно его использовать чтоб и ресурсов не много ел и чтоб польза от него была
а по-моему довольно полезно, поюзаю, спасибо автору
А теперь убираем лишние див и филдсет и вешаем класс на блочную форму!!1
Fieldset иногда вставляю, когда валидатор орет. Это реальный пример, вот здесь как раз возмущался...
А у меня она почему-то не работает, не ищет.(