将图像放入输入框

Posted 2023-03-15

【中文标题】将图像放入输入框

【英文标题】：Putting a image inside a input box

【发布时间】：2011-10-27 02:29:21

【问题描述】：

类似于Put icon inside input element in a form

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

【问题讨论】：

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

【参考方案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;