如何在jquery mobile中的文本框中放置一个图标

时间:2013-02-12 18:58:30

标签: jquery css jquery-mobile

我想在jquery mobile中的文本框中放置一个图标(应该位于文本框的右端,如搜索输入类型中的clearText图标)。 我已经覆盖了一些jquery mobile的css类,但我还是无法实现。有人可以提供解决方案吗?

1 个答案:

答案 0 :(得分:8)

一个简单的解决方案是将文本框和图像放入相对定位的div中。然后,您将图片位置设置为absolute,并为其提供所需的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;
}

检查演示文稿的小提琴:

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