Can we display image inside a text field in html?

Edit

What I want to do is to have an editable area, and want to add html objects inside it(i.e. button, image ..etc)

Can we display image inside a text field in html?

Edit

What I want to do is to have an editable area, and want to add html objects inside it(i.e. button, image ..etc)

• javascript
• jquery
• html
• css
• web

• your question is not clear at all, at least not clear to me...could you clear it a bit – Sudhir Bastakoti Commented May 22, 2012 at 4:00
• @Sudhir It's pretty simple... As I understand, Bader just wants to put an image inside a text field (<input>). – Nathan Commented May 22, 2012 at 4:01

2 Answers 2

Image in text field:

You can do it with CSS.

Look this example:

http://jsfiddle.net/oscarj24/zy7YP/1/

CSS:

.icon {
    background:#FFFFFF url(http://icons.iconarchive.com/icons/gakuseisean/ivista-2/16/Start-Menu-Search-icon.png) no-repeat 4px 4px;
    padding:4px 4px 4px 22px;
    height:18px;
}​

HTML:

<input type="text" name="sample" class="icon">​

According to your post edit, maybe this helps.

Editable area with objects inside:

http://jsfiddle.net/oscarj24/VSWNX/

If you want it using HTML I guess the better way would be to keep the image next to the form element and then using css position:relative property place it inside the text field. Not elegant but works in most cases.