时间戳

首页 > 解决方案 > 在输入框中使用图像作为图标

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

问题描述

在此处输入图像描述我为此尝试了不同的方法，但没有一个对我有用，所以我问这个问题。

我有一张图片在此处输入图像描述

我确实有以下表格

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

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

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

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

标签： csshtmltwitter-bootstrap-3

解决方案

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

.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="https://i.stack.imgur.com/KNLAq.png" alt="user-icon" />
  <input type="text" placeholder="username" />
</div>

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

推荐阅读