Как в input вставить картинку

Internet Explorer Chrome Opera Safari Firefox Android iOS
5.0+ 1.0+ 4.0+ 1.0+ 1.0+ 1.0+ 1.0+

Задача

Разместить кнопку отправки формы внутри рамки для ввода текста.

Решение

Надо понимать, что напрямую добавить кнопку внутрь поля формы нельзя. Поэтому любые методы лишь имитируют этот эффект. Для создания подобной иллюзии следует убрать исходную рамку вокруг поля для поиска и добавить её к элементу, внутри которого располагается поле и кнопка. Данный метод лучше всего работает когда все размеры у нас имеют фиксированные значения. В примере 1 общая ширина формы задана как 300 пикселов, поле имеет ширину 274 пиксела, а кнопка — 20 пикселов. Ширина поля подобрана с учётом того, чтобы не возникало переносов в форме, это негативно скажется на общем виде.

Некоторых добавлений в код CSS потребуют браузеры Safari и Chrome. При получении фокуса поля формы подсвечиваются цветной рамкой, которая разрушает нашу иллюзию единого поля. Чтобы этого не возникало, в стиле поля для поиска добавим outline со значением none , это позволит заблокировать появление рамки в указанных браузерах. Вокруг поля поиска ( ) в любом случае останется тонкая рамка, её можно удалить с помощью специфического свойства -webkit-appearance опять же со значением none .

Пример 1. Форма поиска

HTML5 CSS 2.1 IE Cr Op Sa Fx

Результат примера показан на рис. 1.

Рис. 1. Вид поля для поиска с кнопкой

Саму кнопку можно добавить по разному. Например, сделать её обычной кнопкой с надписью, через , или, как в примере выше, в виде кнопки с фоновым рисунком.

Подскажите пожалуйста, как можно вставить картинку в input, что бы получилось вот так

У меня получается вот так:

Читайте также:  Как блокировать сайт в хроме

Есть ещё проблема, использовать border:none; или border: solid 1px white; не прокатит, есть класс в котором стили для input уже определены, в нем ничего нельзя изменить, так как все эти изменения пойдут по всему проекту. Может есть какая-нибудь альтернатива?

надо заменить:
width: [ширина картинки в пикселях] px;
height: [высота картинки в пикселях] px;

можно заменить на нужные значения отступы кнопки от остальных элементов:
margin: [отступ_сверху] px [отступ_справа] px [отступ_снизу] px [отступ_слева] px;

type="submit" — может быть у вас там type="button" нужен.