На Главную

Украшаем input с помощью CSS

April 25th, 2008 by Yuriy Drozdov

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

Приступим.

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

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

input exmpl

CSS:
  1. #find {
  2.    background: url('http://blog.sribna.com/images/find.png') no-repeat 1px 1px;
  3.    text-indent:20px;
  4.    border:solid 1px #848388;
  5. }

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

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

HTML:
  1. <input type="text" name="testfind" id="find" />

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

Автор: Yuriy Drozdov

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

RSS комментариев | Trackback URI

12 Комментариев

Comment by star Subscribed to comments via email
2008-04-25 00:31:51

Чистенько, гладенько. Вообще красота :)
Пригодилось.

 
Comment by jeka911 Subscribed to comments via email
2008-04-25 02:14:36

Вместо text-indent’а лучче заюзать здесь padding-left. А так криво получается когда переполняется поле - текст лезет в картинку.

Comment by Yuriy Drozdov
2008-04-25 09:32:09

ты прав на все 120% :)

Comment by jeka911 Subscribed to comments via email
Comment by deff Subscribed to comments via email
2008-06-11 07:01:59

Тяжело будет задавать ширину input’a в % (для резиновых форм), если задан горизонтальный padding…

(Вложеность комментариев заканчивается на этом уровне)
 
 
 
Comment by BuriK666 Subscribed to comments via email
2008-08-08 00:47:23

padding для input не работает в Konqueror/Safari

 
 
Comment by milax Subscribed to comments via email
2008-04-25 12:01:42

Да, лучше использовать паддинг.
P.S. В Опере отступа нет. (версия 9.25 сборка 8827)

 
Comment by slav0nic
2008-04-25 16:41:25

хех, пригодится, особенно с моими знаниями CSS :)

 
Comment by Анфиса
2008-04-27 18:09:44

Красивый результат, рекомендую всем украсить свой инпут, ну или хотябы попробовать, для эксперемента.

 
Comment by Victoria Subscribed to comments via email
2008-04-30 17:06:29

в Сафари (Version 3.1.1) картинка отличается от результата выше (иконка сползла вниз на border input’a). Мож line-height полечит эту проблему, в сафари вообще все строки короче, чем в ФФ и ИЕ…

 
Comment by Freak Subscribed to comments via email
2008-05-03 01:49:12

А у меня конечный результат еще круче получился)

 
Comment by Владислав Subscribed to comments via email
2008-05-04 14:23:31

Эксперименты следует проводитm когда есть время или настроение. Сейчас времени маловато, завтра с новыми силами и попробыую. А вообще идея свежая. Сенкс

 

Извините, комментарии закрыты.