html - 文本框内的图像，其中包含一个值

Question

我有一个文本框，里面有一个 bck ground no-repeat 图像。

我需要将图像放在文本框内的右侧，值为“搜索”，文本框的背景颜色应为白色。

我需要这个：-

请帮忙。

Answer 1

要按照您想要的方式放置背景，您需要设置 background-position 属性，如下所示：

background-position:right center; 

关于您在问题中提到的其他样式问题：

设置背景颜色的方式与设置任何元素的背景颜色相同。

background-color:#fff; 

可以通过两种方式将占位符值设为“搜索”。您可以在元素上设置 html5 占位符属性，如下所示：

<input type="text" placeholder="Search"/>

这很好，因为一旦用户开始在您的字段中输入，占位符值就会自动消失。问题是 IE7、8 或 9 不支持 placeholder 属性。更跨浏览器/向后兼容的方法是设置输入的值，如下所示：

<input type="text" value="Seach"/>

然后在用户单击该字段时使用一些 JavaScript 来清空该值。

Answer 2

您可以使用 z-index 来实现它。

尝试这个：

<img width="300px" height="200px" style="position:absolute;"/>
<div style="float:left; z-index:2;position:absolute;">
<input type="text" />
</div>