Как добавить картинку в input html

Как поставить иконку в input (type text) и убрать обводку при клике на инпут?

Хочу в инпут поставить иконку, как в поиске друзей вконтакте. Там в начале инпута серая лупа стоит. Второй момент. Тоже как вконтакте хочу, чтоб при введении курсора в инпут, не было стандартной обводки браузера.

Отслеживать
51.2k 86 86 золотых знаков 266 266 серебряных знаков 505 505 бронзовых знаков
задан 25 мар 2012 в 5:35
53 2 2 золотых знака 2 2 серебряных знака 4 4 бронзовых знака
CSS3 это все может. Гуглите.
25 мар 2012 в 5:43
может иНпут?
25 мар 2012 в 5:48

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

Стандартная обводка браузера убирается с помощью outline: none; в CSS. Чтобы добавить картинку в форму можно применить следующее:

input < background-image: url(ссылка на изображение); background-repeat: no-repeat; /*Убираем повтор изображения*/ background-position: 4px; /*Позиционируем*/ outline: none; /*убираем стандартную обводку браузера*/ -moz-border-radius: 5px; /*закругляем углы для Mozilla*/ -webkit-border-radius: 5px; /*закругляем углы для Chrome, Safari*/ border-radius: 5px; /*закругляем углы для остальных браузеров*/ padding-left: 20px; /*отступ слева от ввода, чтобы текст не был на картинке(выбирать по размеру картинки)*/ height: 20px; /*высота строки ввода*/ font-size: 13px; /*размер шрифта*/ >

Отслеживать
5,916 1 1 золотой знак 15 15 серебряных знаков 35 35 бронзовых знаков
ответ дан 25 мар 2012 в 5:49
DennisBorisov DennisBorisov
507 4 4 серебряных знака 11 11 бронзовых знаков

html
css

Важное на Мете

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Поле с изображением

Для отправки формы на сервер применяется кнопка Submit, которая имеет слабые средства по настройке своего вида. Чтобы не ограничивать дизайн и расширить возможности по оформлению форм, используйте поле с изображением, аналогичное по своему действию кнопке Submit. При нажатии на рисунок данные формы отправляются на сервер и обрабатываются программой, заданной атрибутом action тега .

Поле с изображением создаётся следующим образом.

Здесь URL это адрес изображения в формате JPEG, PNG или GIF, alt указывает альтернативный текст, который виден при отключении картинок в браузере. Вообще, это поле похоже на добавление в код изображения и работает подобно элементу .

В примере 1 показано использование поля с изображением.

Пример 1. Кнопка с изображением

HTML5 IE Cr Op Sa Fx

    Загрузка файла body < background: #053f38; color: #98baba; >p.question   
 Руммикуб
  Колонизаторы
  Каркассон
  Зельеварение

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

Рис. 1. Форма с графической кнопкой

В отличие от кнопки Submit на сервер также отправляются координаты точки щелчка по изображению в виде x и y. Отсчёт координат ведётся от левого верхнего угла картинки и указывается в пикселах. Если добавить к полю с изображением уникальное имя через атрибут name , например, ok, тогда координаты передаются в виде ok.x и ok.y, где впереди через точку стоит имя поля.

Как добавить картинку в input html

— это кнопка отправки в виде изображения. Вы можете использовать атрибут src, чтобы выбрать источник изображения и атрибут alt, чтобы добавить альтернативный текст. Атрибутами width и height можно указать размер изображения в пикселях.

Разрешённое содержимое	Нету, это пустой элемент.
Необязательный закрывающийся тег	Обязательно должен быть открывающийся тег, и обязательно отсутствует закрывающий.
Разрешённые родительские элементы	Любой элемент, которому доступен фразообразующий контент (phrasing content (en-US) ).
DOM-интерфейс	HTMLInputElement (en-US)

Атрибуты

The URI of a program that processes the information submitted by the input element, here image if specified, it overrides the action attribute of the element’s form owner.

If the input element is an image, this attribute specifies the type of content that is used to submit the form to the server. Possible values are:

application/x-www-form-urlencoded : The default value if the attribute is not specified.
multipart/form-data : Use this value if you are using an element with the type attribute set to file .
text/plain If this attribute is specified, it overrides the enctype attribute of the element’s form owner.

In image input element, this attribute specifies the HTTP method that the browser uses to submit the form. Possible values are:

post : The data from the form is included in the body of the form and is sent to the server.
get : The data from the form is appended to the form attribute URI, with a ‘?’ as a separator, and the resulting URI is sent to the server. Use this method when the form has no side-effects and contains only ASCII characters.If specified, this attribute overrides the method attribute of the element’s form owner.

This Boolean attribute specifies that the form is not to be validated when it is submitted. If this attribute is specified, it overrides the novalidate attribute of the element’s form owner.

This attribute is a name or keyword indicating where to display the response that is received after submitting the form. This is a name of, or keyword for, a browsing context (for example, tab, window, or inline frame). If this attribute is specified, it overrides the target attribute of the element’s form owner. The following keywords have special meanings:

_self : Load the response into the same browsing context as the current one. This value is the default if the attribute is not specified.
_blank : Load the response into a new unnamed browsing context.
_parent : Load the response into the parent browsing context of the current one. If there is no parent, this option behaves the same way as _self .
_top : Load the response into the top-level browsing context (that is, the browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this option behaves the same way as _self .

This attribute defines the height of the image displayed for the button.

This attribute specifies that the user must fill in a value before submitting a form but it cannot be used when the type attribute is image type ( submit , reset , or button ). The :optional and :required CSS pseudo-classes will be applied to the field as appropriate.

This attribute specifies a URI for the location of an image to display on the graphical submit button; otherwise it is ignored.

This attribute defines the width of the image displayed for the button.

Как поместить картинку в input?

Всем привет вообщем делал я то задания так долго что поменяли дизайн сайта и все пришлось выкинуть ну теперь мне скинули psd макет и по нему делаю другой так вот шапку почти сделал только проблема с формой поиска не получается картинку запихнуть туда. делал как тут не получилось она за рамкой все равно . http://htmlbook.ru/faq/kak-sde. lya-poiska Может есть ещё какие-то источники с информацией по данной теме буду благодарен если скинете найти не могу.

94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:

Как поместить картинку на одной линии с заголовком?
Здравствуйте уважаемые форумчане! Как поместить картинку на одной линии с заголовком? Есть такой.