把一个输入框

Question

类似Put icon inside input element in a form

但如何我进去，并在右边框的图标内的形象？

Answer 1

试试这个：

background: url(images/icon.png) no-repeat right center; 

这个CSS的解释如下：

背景：[URL图像] [不重复] [水平位置] [垂直位置]

Answer 2

除了将padding-left更改为padding-right以外，还有相同的答案，并更改背景的位置。

喜欢的东西：

background: url(images/comment-author.gif) no-repeat scroll right; 
padding-right: 30px; 

Answer 3

作为除了Bazzz's answer，如果你不想要的图标正对着右边框，您可以在右侧指定填充。

background: url(images/icon.png) no-repeat right 10px center; 

这将会把右侧的图标，但保持在非常边缘10个像素。因此，CSS的解释是这样的：

背景：[URL以图标] [不指定重复] [水平位置] [在右侧填充] [垂直位置]

Answer 4

使用图像和SVG。填充效果很好在所有浏览器（火星2017）

图像文件

.date_element { 
    background-image: url(../img/calendar.png); 
    background-repeat: no-repeat; 
    background-position: right center; 
    background-origin: content-box; 
} 

SVG文件

.date_element { 
    background-image: url(../img/calendar.svg); 
    background-repeat: no-repeat; 
    background-position: right center; 
    background-origin: content-box; 
    background-size: 2.5rem 2.5rem; 
}