在文本字段中放置图像

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