在文本字段中放置圖像

Question

我有一個像這樣的HTML輸入字段。我想在右側的文本框內放置一個圖像。有人可以幫我用它的CSS嗎？

<input type="text" id="name"/> 

在圖片中是作爲文本字段的電子郵件地址，這是我想要的東西里面的圖像。你怎麼做到這一點？

Answer 1

HTML

<div class="fake-input"> 
    <input type="text" /> 
    <img src="http://www.zermatt-fun.ch/images/mastercard.jpg" width=25 /> 
</div> 

CSS

.fake-input { position: relative; width:240px; } 
.fake-input input { border:none: background:#fff; display:block; width: 100%; box-sizing: border-box } 
.fake-input img { position: absolute; top: 2px; right: 5px } 

工作演示

http://jsfiddle.net/HnJZa/

Answer 2

，你可以嘗試這樣的事情

.textBox{ 
background-image:url(iconimage.jpg); 
background-position:right; 
background-repeat:no-repeat; 
padding-left:17px; 
} 

那麼這種風格應用到您的文本框：

<input type="text" class="textBox" /> 

Answer 3

您可以添加類的輸入

<input type="text" id="name" class="inputImage" /> 

，然後背景image to class in css

.inputImage 
{ 
background:#FFFFFF url('img.jpg') no-repeat top right; 
} 

Answer 4

您需要添加類是這樣的：

CSS：

.bgInput { 
    background: url(path of your image.jpg) top right no-repeat; 
} 

HTML：

<input type="text" class="bgInput" id="name"/> 

Answer 5

小的回答：你可以通過設置爲輸入域的背景圖像做到這一點。

Answer 6

嘗試：

#name { 
     background: url('path/image.png') right no-repeat; 
} 

Answer 7

試試這個：

input { 
    background-image: url("icon.png"); 
    background-position: right top; 
    background-repeat: no-repeat; 
    background-size: contain; 
} 

Answer 8

使用背景圖片和背景位置屬性

DEMO

CSS：

input { 
    height: 70px; 
    width: 200px; 
    background-image:url("http://cloud.ohloh.net/attachments/25869/plone-icon-64_med.png"); 
    background-repeat:no-repeat; 
    background-position: 133px 3px; 

} 

Answer 9

.text3 { 
 
\t width: 300px; 
 
\t height: 30px; 
 
} 
 

 
#text3 { 
 
\t background-image: url(https://cdn3.iconfinder.com/data/icons/interface-8/128/InterfaceExpendet-09-128.png); 
 
\t background-size: 30px; 
 
\t background-repeat: no-repeat; 
 
} 
 

 
input { 
 
\t text-align: center; 
 
}

<p class="email"> 
 
\t \t \t Email 
 
</p> 
 
<input type="text" placeholder="Email_ID" class="text3" id="text3">

Answer 10

答案以上不復制在提問圖像中示出的格式，或提供任何解釋。這是一個使用背景圖像的解決方案。

背景圖像語法的解釋。圖像的

background: url('https://d1ululg65bfe3q.cloudfront.net/images/troy/email-icon.png') no-repeat 97.25% 10px white; 

• 位置：URL（ 'https://d1ululg65bfe3q.cloudfront.net/images/troy/email-icon.png'）
• 顯示圖像一次：從左邊不重複
• 距離：從頂部97.25％
• 距離：10px的
• 背景顏色：白色

.bg-email-icon { 
 
    background: url('https://d1ululg65bfe3q.cloudfront.net/images/troy/email-icon.png') no-repeat 97.25% 10px white; 
 
    padding-left: 5px; 
 
    padding-right: 50px; 
 
    width: 255px; 
 
    height: 30px; 
 
    border: 1px gray solid; 
 
    border-radius: 5px 5px 0px 0px; 
 
} 
 

 
.bg-lock-icon { 
 
    background: url('https://d1ululg65bfe3q.cloudfront.net/images/troy/lock-icon.png') no-repeat 96.75% 10px white; 
 
    padding-left: 5px; 
 
    padding-right: 50px; 
 
    width: 255px; 
 
    height: 30px; 
 
    border: 1px gray solid; 
 
    border-top-width: 0px; 
 
    border-radius: 0px 0px 5px 5px; 
 
}

<input name="exampleEmail" class="bg-email-icon" placeholder="Email" type="email"> 
 
<input name="examplePassword" class="bg-lock-icon" placeholder="Password" type="password">