将图标放在表单中的输入元素内答案

【问题标题】：Put icon inside input element in a form将图标放在表单中的输入元素内
【发布时间】：2010-10-29 09:23:39
【问题描述】：

如何在表单的输入元素中放置图标？

现场版在：Tidal Force theme

【问题讨论】：

这行得通。 stackoverflow.com/a/65842858/13700000
这能回答你的问题吗？：geeksforgeeks.org/…
链接已死。

标签： html css forms input icons

【解决方案1】：

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

换句话说，它们有以下两条 CSS 规则：

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

【讨论】：

您能否详细描述一下顶部和左侧参数（7px 7 px）和其他属性？那一定很有帮助。
建议：停止使用和支持 IE 8。
如何将图像对齐到输入字段的右端？
背景图片的问题是Chrome的自动填充会去掉背景图片，让背景完全变黄
要对齐到右边使用：background-position: right;

【解决方案2】：

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

如果这会给您带来任何问题（阅读 IE6），您还可以在 div 内使用无边框输入。

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

不像“干净”，但应该适用于旧版浏览器。

【讨论】：

这个答案的一个很好的补充。有时 ie 会出现问题，这是解决其中一个问题的好方法。为我工作，尽管用跨度代替。
在输入中添加更复杂结构的好方法！
@jonhue，除非你还生活在前十年并且需要支持 IE6，否则我不会推荐这个。即使那样，我也不会称之为“干净”。
@harpo 那么你将如何在输入中包含链接？

【解决方案3】：

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

.icon {
  padding-left: 25px;
  background: url("https://static.thenounproject.com/png/101791-200.png") no-repeat left;
  background-size: 20px;
}

&lt;input type="text" class="icon" value placeholder="Search"&gt;

或者对于从右到左图标

.icon-rtl {
  padding-right: 25px;
  background: url("https://static.thenounproject.com/png/101791-200.png") no-repeat right;
  background-size: 20px;
}

&lt;input type="text" class="icon-rtl" value placeholder="Search"&gt;

【讨论】：

一个小问题 - 图像位于（z 轴）输入上方，因此它会阻止点击它而不关注输入（这可以在 sn-p 中观察到）。可以通过在input下发送图片来解决

【解决方案4】：

你可以试试这个：

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

【讨论】：

【解决方案5】：

我发现这是最好和最干净的解决方案。在 input 元素上使用 text-indent：

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

&lt;input id="icon" style="text-indent:17px;" type="text" placeholder="Username" /&gt;

【讨论】：

我支持 text-indent 因为 padding-left 会增加字段的宽度，它会溢出父元素。
你为什么将样式放在内联而不是#icon css中？
@WylliamJudd 这只是为了演示目的:)
你为什么用id而不是class？

【解决方案6】：

在输入中定位图标的一种简单易行的方法是使用 position CSS 属性，如下面的代码所示。注意：为了清楚起见，我已经简化了代码。

围绕输入和图标创建容器。
将容器位置设置为相对
将图标设置为绝对位置。这将相对于周围容器定位图标。
使用 top、left、bottom、right 来定位容器中的图标。
在输入内设置填充，使文本不会与图标重叠。

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

【讨论】：

干净简单，是的。您还应该使用input { border: none; } 删除输入边框并将边框添加到#input-container { border: 1px solid #000; } 以使其看起来像图像在内部并且实际上是输入的一部分。
@MarioWerner 他将图像推送到输入中，无需做边框黑客，这就是美。我将使用这个想法。
这是一个很好的综合答案！为我节省了很多时间，谢谢您

【解决方案7】：

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

将上述标签添加到您的 CSS 文件中并使用指定的类。

【讨论】：

【解决方案8】：

这对我有用：

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 上自动完成时图像消失
如何使图片可点击，例如如果使用“保存”图标？
它适用于我的混合应用程序，我只是在插入图像后使整个输入框可点击。
我可以将您的代码用于个人和商业项目吗？

【解决方案9】：

你可以试试这个：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>

【讨论】：

【解决方案10】：

在开始时使用这个 css 类作为您的输入，然后进行相应的自定义：

.inp-icon {
    background: url(https://i.imgur.com/kSROoEB.png)no-repeat 100%;
    background-size: 16px;
}

&lt;input class="inp-icon" type="text"&gt;

【讨论】：

你知道如何只为这张图片设置点击事件吗？

【解决方案11】：

我用下面的代码实现了这一点。

首先，您弯曲容器，使输入和图标位于同一行。对齐项目使它们处于同一水平。

然后，不管怎样，让输入占据 100% 的宽度。为图标提供绝对定位，使其与输入重叠。

然后在输入中添加右填充，这样输入的文本就不会到达图标。最后使用right css 属性为图标从输入边缘留出一些空间。

注意：如果您使用 ReactJs，Icon 标签可能是一个真正的图标，或者是您在项目中使用图标的任何其他方式的占位符。

.inputContainer {
  display: flex;
  align-items: center;
  position: relative;
}

.input {
  width: 100%;
  padding-right: 40px;
}

.inputIcon {
  position: absolute;
  right: 10px;
}

<div class="inputContainer">
   <input class="input" />
   <Icon class="inputIcon" />
 </div>

【讨论】：

【解决方案12】：

只需在 CSS 中使用背景属性。

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

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

【讨论】：

【解决方案13】：

我遇到过这样的情况。由于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;
}

顺便提一下，border、padding 和 text-align 属性对于解决方案并不重要。我只是复制了我的原始代码。

【讨论】：

这太老了，我希望你从一年多以前就已经学会了，但是background 是一个简写的属性名称，你可以用它来一次覆盖所有背景属性：background: [color] [image url] [repeat] [position] ，这就是为什么你的颜色会覆盖一切。您也可以将其留在原处并将属性重命名为background-color
@borbulon 是的，你是对的。几乎总是最好使用速记属性名称，完全同意这一点。但是这篇文章的目的是指出属性的顺序有时很重要，而那些“小”的 CSS 规则可能会让人很沮丧，尤其是对于开发中的新手而言。
完全同意，但重点仍然存在：background 是一个简写属性名称。更好的解决方法是不使用速记，而是使用background-color 作为颜色属性（假设您需要颜色和图像）。

【解决方案14】：

使用字体图标

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

【讨论】：

似乎 ::before 不能应用于输入元素。

【解决方案15】：

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

例如，您可以使用：带有隐藏输入的标签（存在图标）。

【讨论】：

很好的解决方案，但请为您的解决方案添加说明。
我现在不记得了 =) 我失去了 UI 经验... 2015...仅后端..)

【解决方案16】：

我不想更改输入文本的背景，它也不适用于我的 SVG 图标。

我所做的是向图标添加 负边距，使其出现在输入框内

并将相同的值 padding 添加到输入中，这样文本就不会出现在图标下方。

<div class="search-input-container">

  <input
    type="text"
    class="search-input"
    style="padding-right : 30px;"
  />

  <img 
    src="@/assets/search-icon.svg" 
    style="margin-left: -30px;"
   />

</div>

*内联样式是为了可读性考虑使用类

【讨论】：

【解决方案17】：

.input_container {
  display: flex;
  border-bottom: solid 1px grey;
  transition: border-color 0.1s ease-in;
  background: white;
}

.input {
  color: blue;
  display: block;
  width: calc(100% - 20px);
  border: none;
  outline: none;
  padding: 8px 16px;
}

.input_img {
  flex-basis: 20px;
  display: inline-block;
  padding: 8px 16px;
  cursor: pointer;
}

<div class="input_container">
  <input type="text" class="input" value>
  <span class="input_img" data-role="toggle">
    <svg
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
        <path
          d="M8 9C7.44772 9 7 9.44771 7 10C7 10.5523 7.44772 11 8 11H16C16.5523 11 17 10.5523 17 10C17 9.44771 16.5523 9 16 9H8Z"
          fill="currentColor"
        />
        <path
          fill-rule="evenodd"
          clip-rule="evenodd"
          d="M6 3C4.34315 3 3 4.34315 3 6V18C3 19.6569 4.34315 21 6 21H18C19.6569 21 21 19.6569 21 18V6C21 4.34315 19.6569 3 18 3H6ZM5 18V7H19V18C19 18.5523 18.5523 19 18 19H6C5.44772 19 5 18.5523 5 18Z"
          fill="currentColor"
        />
      </svg>
    </span>
</div>

【讨论】：

很好的解决方案，但请为您的解决方案添加说明。

【解决方案18】：

您可以采用不同的方法，该方法还允许您单击它并让它发挥作用。看看下面的例子：

<div id="search-bar">
  <input placeholder="Search or Type a URL">
  <button><i class="fas fa-search"></i></button>
</div>

#search-bar {
  display: flex;
  justify-content: center;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  height: 60px;
}
#search-bar > input {
  width: 750px;
  font-size: 30px;
  padding: 20px;
  border-radius: 50px 0px 0 50px;
  border: none;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  border-left: 1px solid #000;
  background: #fff; /* CSS Edit Here */
}
#search-bar > button {
  background: #fff;
  border: none;
  font-size: 30px;
  border-right: 1px solid #000;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  border-radius: 0 50px 50px 0 ;
  padding-right: 20px;
}

【讨论】：

【解决方案19】：

css 后台解决方案在大多数情况下都能做到这一点，但它在图标消失的 webkit (chrome) 自动完成方面存在问题。

还有其他解决方案，包括通过将输入包装在 div 中并添加额外元素（img、div 或类似元素）来更改 html/dom 结构。我不喜欢解决方案，因为您需要使用绝对位置调整元素 css 和/或按像素调整大小以获得正确的位置。或者重新创建输入边框以“合并”输入和 img。

所以这个解决方案是基于css背景图像，不是应用在输入元素上，而是应用在包装器div上。

HTML：

<div class="input-email">
    <input type="text" placeholder="Email" name="email" id="email">
</div>

CSS：

.input-email {
    background: url(/assets/images/email.svg) no-repeat scroll 14px 11px;
    display: inline-block;
} 

.input-email input{
    padding-left: 40px;
    background-color: transparent !important;
}

input:-webkit-autofill, input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
}

使用 .input-email 类的这种方式，我将我的图标图像定义为 div 背景（不受 webkit 自动完成背景的影响）。
下一个 .input-email 输入 定义我填充了输入元素，以便为图像留出空间并将其设置为透明（这在不应用自动完成时有效）
最后，我使用 webkit-autofill 类移除了由自动完成设置的背景颜色的过渡。

注意：在第 2 点我设置了 transparent !important 因为这个 -internal-autofill-selected 会在浏览器中呈现，如果不设置我的也无法覆盖它作为！重要：

input:-internal-autofill-selected {
    background-color: -internal-light-dark(rgb(232, 240, 254), rgba(70, 90, 126, 0.4)) !important;
}

我从这篇帖子 https://www.py4u.net/discuss/1069380 得到了我的解决方案我做了一些调整，虽然主要功劳归于他们。

【讨论】：

【解决方案20】：

这适用于我或多或少的标准形式：

  <button type="submit" value="Submit" name="ButtonType" id="whateveristheId" class="button-class">Submit<img src="/img/selectedImage.png" alt=""></button>

【讨论】：

不是按钮，输入。