Перейти к содержимому

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

  • автор:

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

Здесь могла бы быть ваша реклама

Покинул форум
Сообщений всего: 4574
Дата рег-ции: Июль 2006
Откуда: Israel

Помог: 3 раз(а)

Секрет
Теперь, когда вы уже наверняка второпях отправили свой запрос,
я расскажу вам простой секрет, который сэкономит вам уйму ожиданий,
даже если первый ответ по теме последуем сразу же.

Само собой я знаю что ответят мне тут же, и если я посмотрю
на сообщения на форуме, то пойму что в общем то я и не ошибаюсь.
Но еще я точно замечу, что очень мало тем, в которых всего два ответа :
вопрос автора и еще два сообщение вида Ответ + Спасибо

После этого приходится начинать уточнять этим неграмотным что мне надо.
Они что, сами читать не умеют? А уточнять приходится.
И иногда пока они переварят то что я им скажу проходит и не одна ночь..

Уверен что если бы я им сказал что у меня есть
фиолетовый квадрат, и нужно превратить его в синий треугольник
и я пытался взять кисточку, макнуть в банку и поводить ей по квадрату
но почему то кисточка не принимала цвет краски в банке,
то на мой вопрос — где взять правильные банки мне бы ответили гораздо быстрее
предложив её открыть, а не тратить еще стольник на жестянку.

Поэтому с тех пор я строю свои вопросы по проверенной давным давно схеме:
Что есть
Что нужно получить
Как я пытался
Почему или что у меня не получилось.

На последок как оно происходит на форумах

Цитата:

Новичок: Подскажите пожалуста самый крепкий сорт дерева! Весь инет перерыл, поиском пользовался!
Старожил: Объясни, зачем тебе понадобилось дерево? Сейчас оно в строительстве практически не используется.
Новичок: Я небоскрёб собираюсь строить. Хочу узнать, из какого дерева делать перекрытия между этажами!
Старожил: Какое дерево? Ты вообще соображаешь, что говоришь?
Новичок: Чем мне нравиться этот форум — из двух ответов ниодного конкретного. Одни вопросы неподелу!
Старожил: Не нравится — тебя здесь никто не держит. Но если ты не соображаешь, что из дерева небоскрёбы не строят, то лучше бы тебе сначала школу закончить.
Новичок: Не знаите — лучше молчите! У меня дедушка в деревянном доме живёт! У НЕГО НИЧЕГО НЕ ЛОМАЕТСЯ.
Но у него дом из сосны, а я понимаю, что для небоскрёба нужно дерево прочнее! Поэтому и спрашиваю. А от вас нормального ответа недождёшся.
Прохожий: Самое крепкое дерево — дуб. Вот тебе технология вымачивания дуба в солёной воде, она придаёт дубу особую прочность:
Новичок: Спасибо, братан! То что нужно.

Отредактировано модератором: Uchkuma, 26 Апреля, 2011 — 10:21:12

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

— это кнопка отправки в виде изображения. Вы можете использовать атрибут 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 (type text) и убрать обводку при клике на инпут?

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

Отслеживать
51.4k 86 86 золотых знаков 267 267 серебряных знаков 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.

Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.1.3.2953

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

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

Первое новое сообщение • 6 сообщений • Страница 1 из 1

SuBbI Сообщения: 161 Зарегистрирован: 02.01.2010

 

иимеется код поиска,подскажите как есго сверстать картинкой?

  • Непрочитанное сообщение 21 янв 2010, 19:55
  • Цитата

Distructor Администратор Сообщения: 1607 Зарегистрирован: 28.12.2009

 

Естественно отступы надо подгонять под размер картинки лупы и высоту поля ввода

Если же требуется использовать слишком сложное оформление поля, которое проще вставить целой картинкой,
то ставят его фоном, у поля ввода убирают рамку и позиционируют его с помощью отступов в нужном месте

  • Непрочитанное сообщение 21 янв 2010, 20:13
  • Цитата

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *