将图像放入输入框内

Question

与Put icon inside input element in a form类似

但是如何在框内的右侧中获取图标？

Answer 1

试试这个：

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

此CSS的解释如下：

背景：[url to image] [不重复] [水平位置] [垂直位置]

Answer 2

作为Bazzz's answer的补充，如果您不希望图标正对着右边框，则可以在右侧指定填充。

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

这会将图标放在右侧，但保持距离边缘10个像素。因此，CSS解释如下：

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

Answer 3

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

类似的东西：

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

Answer 4

使用图像和SVG。 Padding适用于所有浏览器（火星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;
}