Html – How to add a img in a text field value

htmlinput

I wanna show a picture inside the default value of a text field. this is what I've tried but it doesn't work.

<input type="text" value="<img src="../images/left_arrow.gif" />Word" />

I've tried escaping the " but that doesn't work

Best Answer

you need to put the image as the background of the element..

html

<input type="text" class="with-default" value="Word" />

css

input.with-default{
   background: url('../images/left_arrow.gif') 0 0 no-repeat;
}

Alternatively, if you are flexible about the actual arrow appearance, you could use a unicode char to display the arrow i.e. ⇐

for more unicode arrows: http://www.alanwood.net/unicode/arrows.html

demo: http://jsfiddle.net/6GyVM/