Sribna

Прежде чем что-то украшать, отвечу на вопрос зачем это делать. А делать это нужно для того, чтобы глазу было за что зацепиться, легче запомнить или представить для чего, собственно, именно это поле ввода, именуемове английским словом input, предназначено. Ну, и, конечно, для красоты :), от нее никуда не деться, она, как известно, спасет Мир!

Приступим.

Что нужно для задуманного? А понадобится всего лишь иконка с сайта famfamfam.com, сам тег input и немного css. Люблю обычно посмотреть, что получится, а потом уж как это делать, поэтому, для таких как я сначала привожу пример того что получим.

Пример выше ничего не покажет читателям, которые читают сайт через RSS, поэтому, специально для них - картинка.

Рассмотрим приведенный css. Во второй строчке задается фоновое изображение и однопиксельные отступы этого изображения от левого и верхнего краев блока. В третьей строчке стоит свойство text-indent, которое определяет отступ первой строки теста, это нужно для того, чтобы текст в текстовом поле не находился над фоновой картинкой.

Приведу html часть, для любознательных.

Замечания, угрозы, жалобы и предложения по поводу данного выше текста можно оставить в комментариях.

Автор: Yuriy Drozdov

Похожие статьи:

• Украшаем input с помощью CSS. Unobtrusive JavaScript.
• Украшаем input с помощью CSS. Продолжение.
• Как задать стиль для input с type=button

Эта запись опубликована Friday, April 25th, 2008 в 12:15 am Рубрики: CSS. Подпишитесь на RSS 2.0 ленту комментариев. Комментирование запрещено, но Вы можете поставить трекбек со своего сайта.