將圖像放在文本字段中

Question

我有一個像這樣的HTML輸入字段。 我想在右側的文本框中放置一個圖像。 有人可以幫我解決這個問題嗎？

<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-color:#fff; display:block; width: 100%; box-sizing: border-box }
.fake-input img { position: absolute; top: 2px; right: 5px }

工作演示

http://jsfiddle.net/HnJZa/

Answer 2

試試這個：

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

Answer 3

你可以嘗試這樣的事情

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

然后將此樣式應用於文本框：

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

Answer 4

使用background-image和background-position屬性

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 5

 .text3 { width: 300px; height: 30px; } #text3 { background-image: url(https://cdn3.iconfinder.com/data/icons/interface-8/128/InterfaceExpendet-09-128.png); background-size: 30px; background-repeat: no-repeat; } input { text-align: center; } 

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

Answer 6

上面的答案沒有復制提問者圖像中顯示的格式，或提供任何解釋。 這是使用背景圖像的解決方案。

背景圖像語法的說明。

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"> 

Answer 7

您可以在輸入中添加類

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

然后將背景圖像轉換為css中的類

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

Answer 8

你需要添加這樣的類：

CSS：

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

HTML：

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

Answer 9

一個小答案：您可以通過設置為輸入字段的背景圖像來完成此操作。

Answer 10

嘗試：

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