How to put icon inside an input box-CodePudding

Can anyone help me to put the tick icon inside the input box at right corner?
Also is it possible to display a 'Field Saved' message along with the tick icon?

Update:
What if form contains multiple input in single row, then how to show icon inside the input boxes?

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/[email protected]/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 >
  <div >
    <div >
      <input type="text">
      <i ></i>
    </div>
  </div>
  <div >
    <div >
      <input type="text">
      <i ></i>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

CodePudding user response：

A little bit of CSS should do the trick here.

Either add the following code snippet to a stylesheet or to a style block. Alternatively, you could apply the styles inline, directly on the HTML elements themselves.

CSS:

.test {
  position: relative;
}

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

UPDATE

If the form contains multiple select boxes in the same row, then they must be wrapped in a div which has relative positioning and inline display.

CodePudding user response：

.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/[email protected]/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 >
  <div >
    <label >
      <input type="text">
      <i ></i>
      <!-- <span>Field Saved</span> -->
    </label>
  </div>
  <div >
    <label >
      <input type="text">
      <i ></i>
      <!-- <span>Field Saved</span> -->
    </label>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

You can add a container element to your textbox and tick icon. Then, you can remove all the styles of the textbox and put similar styles to the container to make it look like the container itself is a textbox. This way, you can make it look like the icon (and the Field Saved text) inside the textbox.