Jak umieścić ikonę wewnątrz pola tekstowego w jquery mobile

Question

Chcę umieścić ikonę wewnątrz pola tekstowego (powinno być na prawym końcu pola tekstowego, np. Ikona clearText w typie wprowadzania zapytań) w jquery mobile. Nadpisałem niektóre klasy css jquery mobile, nadal nie mogłem osiągnąć. Czy ktoś może podać rozwiązanie?

Answer 1

Jednym prostym rozwiązaniem jest umieszczenie pola tekstowego i obrazu w dziale, które jest względnie ustawione. Następnie ustaw pozycję obrazu na absolute i podaj wymaganą wartość 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; 
} 

---

Sprawdź, skrzypce na demo:

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