将图标放入表单中的输入元素


Answers:


391

您链接的网站使用CSS技巧的组合来实现这一目标。首先,它使用背景图片作为<input>元素。然后,为了将光标移到上方,它使用padding-left

换句话说,它们具有以下两个CSS规则:

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

2
您能否描述更多有关顶部和左侧参数(7像素7像素)以及其他属性的信息?那必须是有帮助的。
QMaster 2014年

262
建议:停止使用和支持IE 8
一个编码器

3
如何将图像与输入字段的右端对齐?
ishanbakshi

3
与背景图片的问题是,Chrome的自动填充去除背景图像,使背景黄色完全
克特林Rădoi

1
要与右边对齐,请使用:background-position:right;
raison

52

其他人发布的CSS解决方案是实现此目标的最佳方法。

如果那会给您带来任何问题(请阅读IE6),则还可以在div中使用无边界输入。

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

并非“干净”,但应在较旧的浏览器上运行。


2
这个答案的一个很好的补充。有时即提出问题,这是解决其中一个的好方法。为我工作,尽管有跨度。
罗斯,

在输入中添加更复杂的结构的好方法!
jonhue

@jonhue,除非您仍然生活在过去的十年中并且需要支持IE6,否则我不建议您这样做。即使那样,我也不会称其为“干净”。
harpo

@harpo那么您如何在输入中包含链接?
jonhue

35

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

#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>


34

您可以尝试以下方法:

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

26

我发现这是最好,最干净的解决方案。在元素上使用text-indentinput

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" />

3
我支持text-indent,因为padding-left会增加字段的宽度,并且会从父元素中溢出。
Kostiantyn

1
为什么将样式放在内联而不是在#icon CSS中?
Wylliam Judd

@WylliamJudd这只是出于演示目的:)
Rust

为什么用id代替class?
majid savalanpour

9

在输入中放置Icon的一种简单方法是使用position CSS属性,如下面的代码所示。注意:为了简化起见,我简化了代码。

  1. 创建围绕输入和图标的容器。
  2. 将容器位置设置为相对
  3. 将图标设置为绝对位置。这将使图标相对于周围的容器定位。
  4. 使用顶部,左侧,底部,右侧之一将图标放置在容器中。
  5. 在输入中设置填充,以使文本不与图标重叠。

#input-container {
  position: relative;
}

#input-container > img {
  position: absolute;
  top: 12px;
  left: 15px;
}

#input-container > input {
  padding-left: 40px;
}
<div id="input-container">
  <img/>
  <input/>
</div>


1
干净简单,是的。您还应该使用删除输入边框,input { border: none; }并添加边框#input-container { border: 1px solid #000; }以使其看起来像图像在输入中,并且实际上是输入的一部分。
马里奥·沃纳

1
@MarioWerner他将图像推送到输入中,无需进行边界破解,这就是美。我将使用这个想法。
愚人节


6

这对我有用:

input.valid {
   border-color: #28a745;
   padding-right: 30px;
   background-image: url('https://www.stephenwadechryslerdodgejeep.com/wp-content/plugins/pm-motors-plugin/modules/vehicle_save/images/check.png');
   background-repeat: no-repeat;
   background-size: 20px 20px;
   background-position: right center;
}
<form>
<label for="name">Name</label>
<input class="valid" type="text" name="name" />
</form>


在Chrome上自动填充时,图片会消失
neptune

您如何使图像可点击,例如,如果使用“保存”图标?
user460114 '18

它对我的混合应用程序很有效,插入图像后,我使整个输入框都可单击。
shivam srivastava

5

您可以尝试以下方法:Bootstrap-4 Beta
https://www.codeply.com/go/W25zyByhec

<div class="container">
            <form>
                <div class="row">
                    <div class="input-group mb-3 col-sm-6">
                      <input type="text" class="form-control border-right-0" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
                        <div class="input-group-prepend bg-white">
                            <span class="input-group-text border-left-0 rounded-right bg-white" id="basic-addon1"><i class="fas fa-search"></i></span>
                        </div>
                    </div>
                </div>
            </form>
        </div>






4

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

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

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

4

我有这样的情况。由于background: #ebebeb;。无效。我想在输入字段上放置背景,并且该属性一直显示在背景图像的顶部,但我看不到该图像!因此,我将该background物业移至该物业上方,background-image并且该物业正常运作。

input[type='text'] {
    border: 0;
    background-image: url('../img/search.png');
    background-position: 9px 20px;
    background-repeat: no-repeat;
    text-align: center;
    padding: 14px;
    background: #ebebeb;
}

我的情况的解决方案是:

input[type='text'] {
    border: 0;
    background: #ebebeb;
    background-image: url('../img/search.png');
    background-position: 9px 20px;
    background-repeat: no-repeat;
    text-align: center;
    padding: 14px;
}

刚才提到,borderpaddingtext-align属性不是该解决方案非常重要。我只是复制了原始代码。


1
这是超老的,我希望也许您已经在一年前就学到了,但是它background是一种简写的属性名称,可用于一次覆盖所有背景属性:background: [color] [image url] [repeat] [position],这就是为什么您的颜色覆盖了所有内容的原因。您也可以将其保留在原处,并将其重命名为background-color
borbulon

@borbulon是的,您是对的。几乎总是最好使用速记属性名称,对此完全同意。但是这篇文章的目的是指出属性的顺序有时很重要,那些“小的” CSS规则可能会令人沮丧,尤其是对于开发中的新手。
fantja

1
完全同意,但要点仍然存在:background是速记属性名称。更好的解决方法是不使用速记,而将其background-color用于color属性(假设您同时需要颜色和图像)。
borbulon

3

与font-icon一起使用

<input name="foo" type="text" placeholder="&#61447;">

要么

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

#foo::before
{
  font-family: 'FontAwesome';
  color:red;
  position: relative;
  left: -5px;
  content: "\f007";    
}

7
似乎:: before无法应用于输入元素。
Vishnja

1
 <label for="fileEdit">
    <i class="fa fa-cloud-upload">
    </i>
    <input id="fileEdit" class="hidden" type="file" name="addImg" ng-file-change="onImageChange( $files )" ng-multiple="false" accept="{{ contentType }}"/>
  </label>

例如,您可以使用带有隐藏输入(带有图标)的:标签。


1

在开始时使用此CSS类作为输入,然后相应地自定义:

    
 .inp-icon{
background: url(https://i.imgur.com/kSROoEB.png)no-repeat 100%;
background-size: 16px;
 }
<input class="inp-icon" type="text">


您知道如何仅为此图片设置点击事件吗?
Arjun

0

这或多或少适用于我的标准格式:

  <button type="submit" value="Submit" name="ButtonType" id="whateveristheId" class="button-class">Submit<img src="/img/selectedImage.png" alt=""></button>
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.