Question

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

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

Answer 1

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

换句话说，他们有两个CSS规则：

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

Answer 2

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

如果这应该给你带来任何问题（阅读IE6），你也可以在div中使用无边框输入。

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

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

Answer 3

你可以试试这个：

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

Answer 4

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

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

Answer 5

我觉得这是最好，最干净的解决方案。在input元素

上使用 text-indent

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

Answer 6

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

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

Answer 7

这对我有用：

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>

Answer 8

只需在CSS中使用background属性。

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

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

Answer 9

使用font-icon

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

OR

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

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

Answer 10

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

uint8_t

Answer 11

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

创建围绕输入和图标的容器。
将容器位置设置为相对位置
将图标设置为绝对位置。这将使图标相对于周围的容器定位。
使用上，左，下，右任一图标将图标放置在容器中。
在输入中设置填充，以使文本不与图标重叠。

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

Answer 12

我有这样的情况。由于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属性对解决方案并不重要。我只是复制了原始代码。

Answer 13

我是通过下面的代码实现的。

首先，弯曲容器，使输入和图标在同一行上。对齐项目使它们处于同一级别。

然后，使输入不占用宽度的100％。赋予图标绝对的位置，使其与输入重叠。

然后在输入中添加右填充，以使键入的文本不会到达图标。最后使用right css属性为图标提供距输入边缘一定距离的空间。

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

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

Answer 14

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

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

Answer 15

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

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

<input class="inp-icon" type="text">

Answer 16

我既不想更改输入文本的背景，也不能与我的SVG图标一起使用。

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

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

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

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

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

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

Answer 19

这对我来说适用于或多或少的标准表格：

var sam = {
  name: "san",
  age: 56,
  lastname: "tom"
};

(function(person) {
  console.log(person.name);
  console.log(person.lastname);
})(sam);

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

19 个答案: