如何将图标放入输入框内

Question

谁能帮我把对勾图标放到右上角的输入框中？
也可以显示 'Field Saved' 消息和勾号图标吗？

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

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

Answer 1

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

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

CSS:

.test {
  position: relative;
}

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

更新

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

Answer 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 文本）。

如何将图标放入输入框内

How to put icon inside an input box

html

css

input-field

bootstrap-4