Вставляем иконку в HTML форму с помощью CSS
26 декабря 2009 года, Размещено в категории: 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
11 лет назад
Еще один полезный пост, спасибо. Хорошо все разжевано.
vays
11 лет назад
Не работает в Mozilla
11 лет назад
Исправил, просто забыл вставить иконку в демо 🙂
Алексей
7 лет назад
Просто border-radius работает и не только в фоксе и опере