如何将图标放在输入框内答案

【问题标题】：How to put icon inside an input box如何将图标放在输入框内
【发布时间】：2022-02-07 20:58:36
【问题描述】：

谁能帮我把勾号图标放在右上角的输入框中？
是否还可以显示“字段已保存”消息以及勾选图标？

更新：
如果表单在单行中包含多个输入怎么办，那么如何在输入框中显示图标？

小提琴：https://jsfiddle.net/sanadqazi/5Len09ad/1/

.test {
  position: relative;
}

.test .fas.fa-check {
  position: absolute;
  top: 0;
  right: 0;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />

<div class="row">
  <div class="col-8">
    <div class="test">
      <input type="text">
      <i class="fas fa-check inp"></i>
    </div>
  </div>
  <div class="col-4">
    <div class="test">
      <input type="text">
      <i class="fas fa-check inp"></i>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>

【问题讨论】：

欢迎来到 SO。请阅读“如何提问”stackoverflow.com/help/how-to-ask 并尝试改进您的问题。

标签： html css bootstrap-4 input-field

【解决方案1】：

一点点 CSS 应该可以解决问题。

将以下代码 sn-p 添加到样式表或样式块中。或者，您可以直接在 HTML 元素本身上应用内联样式。

CSS：

.test {
  position: relative;
}

.test .fas.fa-check {
  position: absolute;
  top: 0;
  right: 0;
}

更新

如果表单在同一行中包含多个选择框，则必须将它们包裹在具有相对定位和内联显示的 div 中。

【讨论】：

嗨@alex-scott 感谢您的回复，我遇到了一个问题，实际上我的表单包含多个列，在这种情况下right: 0; 在屏幕一角显示图标。
您的示例代码不显示表单或表格，只是一个输入。
@SanadQazi 请发布一个显示您真正问题的小提琴
小提琴：jsfiddle.net/sanadqazi/5Len09ad/1

【解决方案2】：

.col-8,
.col-4 {
  position: relative;
}

.input-container {
  border: solid 1px #000;
  border-radius: 2px;
  position: absolute;
  display: flex;
  align-items: center;
  padding: 4px;
  gap: 4px;
}

.input-container i {
  display: flex;
  justify-content: center;
  align-items: center;
}

.inp {
  height: 36px;
  line-height: 36px;
}

input[type="text"] {
  /* padding-right: 100px; */
  border: none;
  outline: none;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />

<div class="row">
  <div class="col-8">
    <label class="input-container">
      <input type="text">
      <i class="fas fa-check inp"></i>
      <!-- <span>Field Saved</span> -->
    </label>
  </div>
  <div class="col-4">
    <label class="input-container">
      <input type="text">
      <i class="fas fa-check inp"></i>
      <!-- <span>Field Saved</span> -->
    </label>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>

您可以将容器元素添加到文本框并勾选图标。然后，您可以删除文本框的所有样式，并将相似的样式放入容器中，使其看起来容器本身就是一个文本框。这样，您可以使它看起来像文本框中的图标（以及 Field Saved 文本）。

【讨论】：