Làm thế nào để đặt một biểu tượng bên trong hộp văn bản trong jquery mobile

Question

Tôi muốn đặt một biểu tượng bên trong hộp văn bản (nên ở cuối bên phải của hộp văn bản, như biểu tượng clearText trong kiểu nhập tìm kiếm) trong jquery mobile. Tôi đã ghi đè một số lớp css của điện thoại di động jquery, tôi vẫn không thể đạt được. Ai đó có thể vui lòng cung cấp giải pháp?

Answer 1

Một giải pháp đơn giản là đặt hộp văn bản và hình ảnh của bạn vào div được định vị tương đối. Sau đó, bạn đặt vị trí hình ảnh thành absolute và đặt giá trị right cần thiết.

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; 
} 

---

Kiểm tra xem fiddle cho một bản demo:

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