Прозрачный input

[x7g100]

Здравствуйте, часто замечаю что на многих сайтах input заменен на свое изображение.

Уважаемые верстальщики, подтолкните пожалуйста в нужное направление.

Нашел PSD исходник с Login формой.

Естественно пробовал найти уже разобранную тему, не чего нормального нет. (Возможно руки не из того места растут)

За ранее благодарю.

[Catherine]

Берем первую попавшуюся форму, нажимаем правой кнопкой мыши по инпуту, выбираем "просмотр кода элемента", и вуаля. И так по каждому пункту.

Разумеется, это означает, что Вы знаете про средства разработчика и активно ими пользуетесь.

Edited July 15, 2012 by Catherine

[hedgehog]

Изображения в username&password полях? Элементарно. Картинка-бекграунд с позиционированием "100% 50%" и правым паддингом, чтобы текст не залазил на картинку. А на что вешать бекграунд - на инпут или его враппер - решайте сами.

[Xandros]

Нестандартные текстовые поля состоят из 2х частей:

1. DIV контейнера

2. И, собственно, input'а, который помещается внутри DIV контейнера

Фону DIV контейнера обычно присваивают нужный фон поля, а фон текстового поля убирают вообще. input уже размещают внутри графического "прямоугольника" для текста.

Вот примерный код, который может Вам помочь:

div.loginfield{
position: absolute; /*Здесь может быть другой тип позиционирования*/
width: 230px; /*Размеры графической части поля. Задаётся Вами*/
height: 26px;
background-image: url('http://xandros.ru/images/gui/txt111.png'); /*Указываем адрес загрузки граф. поля*/
}
input.loginfield{
position: relative;
top: 2px; /*Используем TOP и LEFT, чтобы сместить верхние координаты под начало области самого поля*/
left: 34px;
padding: 3px 0 5px 1px; 
border: none; /*Убираем границу поля (если необходимо)*/
background: none; /*Убираем фон поля*/
width: 161px; /*Размеры реального поля. Задаётся Вами*/
height: 14px;
}

У Google Chrome есть особенность: текстовое поле при получении фокуса обретает рыжую рамку. Чтобы от неё избавиться, делайте так:

input.loginfield:focus
{
outline: none;
}

Я использовал этот код и вроде всё работало. Надеюсь, и Вам он поможет.