将图像放入输入框答案

【问题标题】：Putting a image inside a input box将图像放入输入框
【发布时间】：2011-10-27 02:29:21
【问题描述】：

类似于Put icon inside input element in a form

但是如何在框的右侧获得图标？

【问题讨论】：

有一个封闭的问题，和这个很相似，stackoverflow.com/questions/20634868/…

标签： css

【解决方案1】：

试试这个：

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

这个CSS的解释如下：

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

【讨论】：

【解决方案2】：

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

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

这会将图标放在右侧，但距离最边缘 10 像素。所以，CSS 解释应该是这样的：

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

【讨论】：

【解决方案3】：

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

类似：

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

【讨论】：

你试过用padding-right吗？我复制了您的示例，但由于某种原因，gif 将始终保持右上角和垂直居中。
刚刚发现如果你使用 background-position: right 30px top 10px 定位效果很好

【解决方案4】：

使用图像和 SVG。填充适用于所有浏览器（2017 年 3 月）

图片文件

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

【讨论】：