HTML add bootstrap check inside input readonly-CodePudding

I'm using bootstrap inside of my app on which I have a readonly input where I need to add checkmark inside of it. I tried to add simple <input readonly type="text" id="kyc_status" value="Success"> but this won't work. Below is my HTML structure:

<div >
  <div >
    <form>
      <div >
        <div >
          <label for="kyc_status" >
            KYC Status
          </label>
          <input readonly type="text" id="kyc_status"  value="Success">
          <i ></i>
        </div>
      </div>
    </form>
  </div>
</div>

So now it produces me:

How to put this checkmark inside of the input on the left ?

CodePudding user response：

I put both in a div tag and then gave the position.

Note: I have given color, width and height to the icon tag so that it can be seen. For testing.

You can use the following code. The style is also written.

<div >
    <div >
        <form>
            <div >
                <div >
                    <label for="kyc_status" >
                        KYC Status
                    </label>
                    <div >
                        <input readonly type="text" id="kyc_status"  value="Success">
                        <i ></i>
                    </div>
                    <style>
                        .pos {
                            position: relative;
                        }

                        .bi-check {
                            width: 5px;
                            height: 4px;
                            background: red;
                            position: absolute;
                            top: 50%;
                            left: 3px;
                        }
                    </style>
                </div>
            </div>
        </form>
    </div>
</div>

Exactly like this:

CodePudding user response：

You can use position absolute property on checked icon and move it over the input field.

steps wrap input element and icon tag in one division with style property positions relative.

then for input use below property padding-left 20px

then for icon use below properties

position absolute

left 10px - adjust according your inputs field size

top 5px - adjust according your inputs field size

CodePudding user response：

You can use .input-group and adjust styling of .input-group-text for your needs.
Below, I have added .border-end-0, .bg-transparent, and .pe-0 to the .input-group-text and .border-start-0 to the input.form-control.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">

<div >
  <div >
    <form>
      <div >
        <div >
          <label for="kyc_status" >
            KYC Status
          </label>
          <div >
            <span ><i ></i></span>
            <input readonly type="text" id="kyc_status"  value="Success">
          </div>
        </div>
      </div>
    </form>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA /3y gxIOqMEjwtxJY7qPCqsdltbNJuaOe923 mo//f6V8Qbsw3" crossorigin="anonymous"></script>