如何在100％文本框中设置bgimg？

Question

我正在构建移动网络应用程序并寻找以下解决方案：

[searchbox [img]]

其中searchbox的宽度应为100％。和img在输入框中。

尝试了三种效果不佳的解决方案：

首先，使用div包装'false'边框+无边框输入框。

[div[textbox][img]]

问题看起来不错，但是在文本框的焦点上，文本框无论如何都会变得难看。

-

其次，位置图像相对（左：-40px）

[textbox][img]

问题无法将文本框宽度设置为100％，img换行到下一行，不考虑-40px;

-

第三， 文本框中的背景图像，右对齐

问题：图片无法点击。

这里提示？也许bg-img +相对img（0x0px）来捕获点击，但它痒。

Answer 1

您的第一个解决方案应该可以正常工作，只需将input:focus {outline:none}添加到您的css：

http://jsfiddle.net/L9gyp/2/