把一個輸入框

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; 
}