Вставляем иконку в HTML форму с помощью CSS

26 декабря 2009 года, Размещено в категории: HTML / CSS

иконка в HTML форму

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

Шаг 1: HTML код

Шаг 2: CSS код
Также мы можем сделать с помощью CSS углы за округлыми. С помощью CSS атрибута радиус ( "-moz-border-radius-") но работает он только в Firefox и Opera 10v.

input{
background: url(search.gif) #ffffff no-repeat left center; /*url иконки, цвет фона формы*/
border: 3px solid #EEEEEE; /*размер, цвет границы формы*/
color: #808080; /*цвет текста*/
font-weight: bold;
font-family: "Lucida Grande",Verdana,sans-serif; /*шрифт текста*/
height: 24px; /*высота формы*/
padding-left: 30px; /*внутренний отступ текста от левого края формы*/
padding-top:6px; /*внутренний отступ текста от верхнего края формы*/
width: 300px; /*длина формы*/
font-size: 1em; /*размер шрифта*/
vertical-align: middle;
text-decoration: none; /*убрали оформления текста*/
-moz-border-radius-bottomleft: 10px; /*левый нижний угол*/
-moz-border-radius-bottomright: 10px; /*правый нижний угол*/
-moz-border-radius-topleft: 10px; /*левый верхний угол*/
-moz-border-radius-topright: 10px; /*правый верхний угол*/
}

input:hover
{
border: #d3d3d3 3px solid; /*цвет и размер границы формы при навидении мыши*/
}

Мой блог находят по следующим фразам
dicim.net
купить видеоплеер для сайта
как правильно разместить текст и иллюстрации
jquery создание файла
лента в css
красивые кнопки css






4 комментария

  • 7 лет назад Ответить

    Еще один полезный пост, спасибо. Хорошо все разжевано.

    • 7 лет назад Ответить

      Исправил, просто забыл вставить иконку в демо 🙂

  • 3 года назад Ответить

    Просто border-radius работает и не только в фоксе и опере

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Перед отправкой формы:

Метки: