proview.ru → Конструирование сайтов → HTML → Форма с заокругленными углами

Форма с заокругленными углами

Как создать форму нестандартной формы? Возможно и Вы когданибудь задумывались над этим вопросом.
Начнем с простого, но эффектного приема — создание нестандартной формы поиска. Возьмем вот такую симпатичную форму.

forma-dlya-poiska

Сам код формы, в общем-то, стандартный.

  1. <div class=“search”>
  2. <form action=“#” method=“get”>
  3. <fieldset>
  4. <input name=“text” onfocus=“if(this.value==’Что будем искать?’) this.value=”;” onblur=“if(this.value==”) this.value=’Что будем искать?’;” value=“Что будем искать?” type=“text”>
  5. </fieldset>
  6. </form>
  7. </div>

DIV-ом я обернул здесь для удобства, а аттрибуты onfocus и onblur с js не дают исчезнуть надписи «Что будем искать?».

Рассмотрим теперь оформление:

  1. .search {background: url(search.gif) no-repeat;
  2. margin: 40px auto; height: 19px; width: 165px;}
  3. .search input {background: none; border: none; color: #8a8989;
  4. font: 9pt Tahoma, Arial, sans-serif; padding-left: 38px;} 
.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), чтобы убрать его с картинки.

Своими словами то это получается что мы “обнуляем” свойства формы и указываем фоном наше изображение.



Источник: http://design-praktik.com

Популярное