How to put an icon inside textbox in jquery mobile [closed]

Question

I want to put an icon inside textbox (should be at right end of the textbox, like clearText icon in search input type) in jquery mobile. I have overridden some css classes of jquery mobile, still I couldn't achieve. Can someone please provide the solution?

Answer 1

One simple solution is to put your text box and image into a div that is relatively positioned. Then you set the image position to absolute and give it the needed right value.

HTML:

<div>
    <input type="text" />
    <img src="http://the-dream.co.uk/images/lens_icon.png" width="15" />
</div>

CSS:

div {
    position:relative;
    width:200px
}

input{
    width:200px;
}

img{
    position:absolute;
    right:5px;
    top:5px;
}

---

Check that fiddle for a demo:

http://jsfiddle.net/8sbpn/1/