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

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

Шаг 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