题 将图标放在表单中的input元素内


如何在表单的输入元素中放置一个图标?

Screenshot of a web form with three inputs which have icons in them

现场版: 潮汐力主题


200
2018-05-27 19:36


起源


@IvanSokalskiy假设有人正在使用Bootstrap。并非所有遇到此问题的人都会使用Bootstrap! - Barry Michael Doyle


答案:


您链接的网站使用CSS技巧组合来解决此问题。首先,它使用背景图像 <input> 元件。然后,为了将光标推过,它使用 padding-left

换句话说,他们有这两个CSS规则:

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

304
2018-05-27 19:42



您能否详细描述一下顶部和左侧参数(7px 7 px)和其他属性?这一定很有帮助。 - QMaster
该 padding-left Internet Explorer 8正在忽略它。确实没有被忽略,但是只要输入长输入,输入就会开始出现在图标的前面。 - Francisco Corrales Morales
建议:停止使用和支持IE 8。 - a coder
如何将图像对齐到输入字段的右端? - ishanbakshi
背景图片的问题在于Chrome的自动填充功能会删除背景图像并使背景完全变黄 - Cătălin Rădoi


其他人发布的CSS解决方案是实现这一目标的最佳方式。

如果这应该给你任何问题(阅读IE6),你也可以在div内使用无边框输入。

<div style="border: 1px solid #DDD;">
    <img src="icon.png"/>
    <input style="border: none;"/>
</div>

不是“干净”,但应该适用于旧浏览器。


39
2018-05-27 19:48



这个答案的一个很好的补充。有时即出问题,这是解决其中一个问题的好方法。为我工作,虽然有跨度。 - Ross
在输入中添加更复杂结构的好方法! - jonhue
@jonhue,我不推荐这个,除非你仍然生活在前十年,需要支持IE6。即便如此,我也不会称之为“干净”。 - harpo
@harpo你如何在输入中包含链接呢? - jonhue


你可以试试这个:

input[type='text'] {
    background-image: url(images/comment-author.gif);
    background-position: 7px 7px;
    background-repeat: no-repeat;
}

25
2018-05-27 19:43





我发现这是最好,最干净的解决方案。运用 文本缩进 在...上 input 元件

CSS:

#icon{
background-image:url(../images/icons/dollar.png); 
background-repeat: no-repeat; 
background-position: 2px 3px;
}

HTML:

<input id="icon" style="text-indent:17px;" type="text" placeholder="Username" />

20
2017-09-02 10:20



我支持text-indent,因为padding-left会增加字段的宽度,并且它会溢出父元素。 - stakantin
为什么你把风格内联而不是#icon css? - Wylliam Judd
@WylliamJudd这只是为了演示目的:) - user3284463


没有背景图像的解决方案:

#input_container {
    position:relative;
    padding:0 0 0 20px;
    margin:0 20px;
    background:#ddd;
    direction: rtl;
    width: 200px;
}
#input {
    height:20px;
    margin:0;
    padding-right: 30px;
    width: 100%;
}
#input_img {
    position:absolute;
    bottom:2px;
    right:5px;
    width:24px;
    height:24px;
}
<div id="input_container">
    <input type="text" id="input" value>
    <img src="https://cdn4.iconfinder.com/data/icons/36-slim-icons/87/calender.png" id="input_img">
</div>


16
2017-10-26 11:30





.icon{
background: url(1.jpg) no-repeat;
padding-left:25px;
}

将以上标记添加到CSS文件中并使用指定的类。


7
2018-05-28 10:04





只需在CSS中使用background属性即可。

<input id="foo" type="text" />

#foo
{
    background: url(/img/foo.png);
}

3
2018-05-27 19:42