Поместить изображение внутри текстового поля с помощью HTML / CSS / JS?

Question

Есть ли способ разместить изображение внутри текстового поля с помощью HTML / CSS / JS, не используя изображение в качестве фона? Изображение должно быть кликабельным и располагаться справа от поля. Спасибо.

Answer 1

Кроме изображения, плавающего над текстовым полем с помощью позиционирования и z-index, и добавления отступов к текстовому полю, чтобы содержимое не попало под изображение, я не могу придумать другого способа добиться этого.

Answer 2

Вы имеете в виду маленькое изображение внутри текстового поля формы? Как правило, вы можете использовать атрибут placeholder, но единственный заполнитель значения атрибута может иметь текст. Если / когда они добавляют дополнительные значения для атрибута (плюс не все браузеры поддерживают заполнители), вы сможете указать непрозрачность, float и т. Д. В таблице стилей css.

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

Хотя вы могли бы использовать z-index, я думаю, что это будет намного больше работы, чем стоило бы, kwim?

РЕДАКТИРОВАТЬ, ЧТОБЫ ДОБАВИТЬ: Это меня беспокоило, поэтому я немного покопался и нашел эту ссылку: http://www.jankoatwarpspeed.com/post/2008/11/26/Make-image-buttons-a-part-of-input-fields.aspx

Я не знаю, насколько это удобно для вас, но, возможно, стоит взглянуть!