How to put an icon inside a text box in jQuery mobile

Question

I want to put an icon inside a text field (should be at the right end of the text field, for example, the clearText icon in the input type) in jQuery mobile. I redefined some jQuery mobile css classes, but I could not achieve this. Can anyone suggest a solution?

Answer 1

One simple solution is to place the text box and image in a div that is relatively positive. Then you set the image position to absolute and set it to right .

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 the script to demonstrate:

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