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

26.12.2009   |  

HTML / CSS   |  

Комментарии (3)

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

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

Шаг 1: HTML код

1
2
3

<form> 
<input type="text" />
</form>

Шаг 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; /*цвет и размер границы формы при навидении мыши*/
}

Интересный SEO-блог о зароботке автором которого является Максим Камельфо, на блоге Максима вы сможете найти много полезной информации о SEO и зароботке в интернете для себя.

Интересные статьи:

  1. blogavod 26.12.2009 16:35

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

  2. vays 14.02.2010 20:29

    Не работает в Mozilla

  3. Webchester 14.02.2010 21:56

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

Оставь свое мнение:




Подпишись на обновление блога