jquery मोबाइल में टेक्स्टबॉक्स के अंदर एक आइकन कैसे डालें

Question

मैं jquery मोबाइल में टेक्स्टबॉक्स के अंदर एक आइकन रखना चाहता हूं (टेक्स्टबॉक्स के दाहिने सिरे पर होना चाहिए, जैसे खोज इनपुट प्रकार में clearText आइकन)। मैंने jquery मोबाइल के कुछ सीएसएस वर्गों को ओवरराइड किया है, फिर भी मैं हासिल नहीं कर सका। क्या कोई समाधान प्रदान कर सकता है?

Answer 1

एक साधारण समाधान है कि आप अपने टेक्स्ट बॉक्स और छवि को एक div में रखें जो अपेक्षाकृत स्थित है। फिर आप छवि स्थिति को absolute पर सेट करें और इसे आवश्यक right मान दें।

HTML:

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

सीएसएस:

div { 
    position:relative; 
    width:200px 
} 

input{ 
    width:200px; 
} 

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

---

चेक एक डेमो के लिए है कि बेला:

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