css - 在输入框中使用图像作为图标

Question

我为此尝试了不同的方法，但没有一种方法适合我，所以我问这个问题。

我有一张图片

我有下面的表格

<div className="login-form">
  <form className="form-horizontal" id="loginForm">
    <div className="form-group" id="username-div">
      <input type="email" className="form-control usertext" id="username" placeholder="Email" />
    </div>
</div>
</div>

我也尝试过使用绝对位置。但不工作。

那么，我该如何解决这个问题呢？

任何提示或帮助都会有所帮助。

Answer 1

有几种方法可以实现这一点，一种是使用绝对定位并将图标放在输入框内，但我更喜欢这种方式:

.custom-input {
  background-color: white;
  border: 2px solid #ededed;
  padding: 6px;
  width: 215px;
  border-radius: 3px;
}

.custom-input>* {
  vertical-align: middle;
}

.custom-input img {
  width: 25px;
  height: 25px;
  display: inline-block;
}

.custom-input input {
  border: none;
  height: 40px;
  display: inline-block;
  outline: none;
  margin-left: 6px;
}

<div class="custom-input">
  <img src="/image/KNLAq.png" alt="user-icon" />
  <input type="text" placeholder="username" />
</div>

但是，请注意这不是推荐的方式，在这种情况下最好使用字体图标。这种情况下已经有很多漂亮、优雅的字体图标。