How to put icon inside an input box

Question

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

Welcome to SO. Please read "how to ask" https://stackoverflow.com/help/how-to-ask and try to improve your question. — PA., Feb 07 '22 at 11:49

Alex Ander · Accepted Answer · 2022-02-07T12:17:54.893

3

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.

edited Feb 07 '22 at 12:17

answered Feb 07 '22 at 12:03

Alex Ander

1,430
12
19

Hi @alex-scott thanks for reply, I am facing a problem, actually my form contains multiple columns, in that case `right: 0;` displaying the icon at the corner of the screen. – Sanad Qazi Feb 07 '22 at 12:05
Your example code doesn't show a form or tables, just an input. – Alex Ander Feb 07 '22 at 12:06
1

@SanadQazi Please post a fiddle that shows your real issue – Nitheesh Feb 07 '22 at 12:11
Fiddle: https://jsfiddle.net/sanadqazi/5Len09ad/1/ – Sanad Qazi Feb 07 '22 at 12:19

deekeh · Answer 2 · 2022-02-07T12:53:46.640

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

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.

How to put icon inside an input box

2 Answers2