Украшаем input с помощью CSS
April 25th, 2008 by Yuriy DrozdovПрежде чем что-то украшать, отвечу на вопрос зачем это делать. А делать это нужно для того, чтобы глазу было за что зацепиться, легче запомнить или представить для чего, собственно, именно это поле ввода, именуемове английским словом input, предназначено. Ну, и, конечно, для красоты :), от нее никуда не деться, она, как известно, спасет Мир!
Что нужно для задуманного? А понадобится всего лишь иконка с сайта famfamfam.com, сам тег input и немного css. Люблю обычно посмотреть, что получится, а потом уж как это делать, поэтому, для таких как я сначала привожу пример того что получим.
Пример выше ничего не покажет читателям, которые читают сайт через RSS, поэтому, специально для них - картинка.
-
#find {
-
background: url('http://blog.sribna.com/images/find.png') no-repeat 1px 1px;
-
text-indent:20px;
-
border:solid 1px #848388;
-
}
Рассмотрим приведенный css. Во второй строчке задается фоновое изображение и однопиксельные отступы этого изображения от левого и верхнего краев блока. В третьей строчке стоит свойство text-indent, которое определяет отступ первой строки теста, это нужно для того, чтобы текст в текстовом поле не находился над фоновой картинкой.
Приведу html часть, для любознательных.
-
<input type="text" name="testfind" id="find" />
Замечания, угрозы, жалобы и предложения по поводу данного выше текста можно оставить в комментариях.
Чистенько, гладенько. Вообще красота
Пригодилось.
Вместо text-indent’а лучче заюзать здесь padding-left. А так криво получается когда переполняется поле - текст лезет в картинку.
ты прав на все 120%
:)
Тяжело будет задавать ширину input’a в % (для резиновых форм), если задан горизонтальный padding…
padding для input не работает в Konqueror/Safari
Да, лучше использовать паддинг.
P.S. В Опере отступа нет. (версия 9.25 сборка 8827)
хех, пригодится, особенно с моими знаниями CSS
Красивый результат, рекомендую всем украсить свой инпут, ну или хотябы попробовать, для эксперемента.
в Сафари (Version 3.1.1) картинка отличается от результата выше (иконка сползла вниз на border input’a). Мож line-height полечит эту проблему, в сафари вообще все строки короче, чем в ФФ и ИЕ…
А у меня конечный результат еще круче получился)
Эксперименты следует проводитm когда есть время или настроение. Сейчас времени маловато, завтра с новыми силами и попробыую. А вообще идея свежая. Сенкс