帶有值的文本框中的圖像

Question

我有文本框，其中有一個黑色的無重複圖像。

我需要將圖像放置在文本框右側，值爲「搜索」，並且文本框的背景顏色應爲白色。

我需要這樣的： -

請幫助。

Answer 1

您可以使用z-index來實現它。

試試這個：

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

Answer 2

要放置背景你想要的方式，你需要設置背景位置屬性，像這樣：

background-position:right center; 

關於你在你的問題中提到的其他樣式問題：

設置背景顏色與您設置任何元素的背景顏色的方式相同。

background-color:#fff; 

獲取佔位符值爲「搜索」可以通過兩種方式完成。您可以設置HTML5佔位符屬性的元素，像這樣：

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

這是偉大的，因爲用戶開始在字段中輸入佔位符值時，就會自動消失。問題是，佔位符屬性不是IE7，8或9所支持的更多的跨瀏覽器/向後兼容的方式做，這是設置輸入的值，例如：

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

然後使用一些JavaScript在用戶點擊該字段時清空該值。