如何在jquery mobile中的文本框内放置一个图标 [英] How to put an icon inside textbox in jquery mobile

问题描述

我想在jquery mobile中的文本框（应该在文本框的右端，如搜索输入类型中的clearText图标）中放置一个图标。
我已经重写了一些CSS类的jQuery移动，仍然我无法实现。

I want to put an icon inside textbox (should be at right end of the textbox, like clearText icon in search input type) in jquery mobile. I have overridden some css classes of jquery mobile, still I couldn't achieve. Can someone please provide the solution?

推荐答案

一个简单的解决方案是将你的文本框和图像放入一个相对位置的div 。然后将图像位置设置为 absolute ，并给它所需的右值。

One simple solution is to put your text box and image into a div that is relatively positioned. Then you set the image position to absolute and give it the needed right value.

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 fiddle for a demo:

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

这篇关于如何在jquery mobile中的文本框内放置一个图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！