HTML add bootstrap check inside input readonly - html

Question

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" class="form-control" value="Success"> but this won't work. Below is my HTML structure:
<div class="card">
<div class="card-body">
<form>
<div class="row mb-3">
<div class="col">
<label for="kyc_status" class="form-label">
KYC Status
</label>
<input readonly type="text" id="kyc_status" class="form-control" value="Success">
<i class="bi bi-check"></i>
</div>
</div>
</form>
</div>
</div>
So now it produces me:
How to put this checkmark inside of the input on the left ?

Answer 1

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/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.9.1/font/bootstrap-icons.css">
<div class="card">
<div class="card-body">
<form>
<div class="row mb-3">
<div class="col">
<label for="kyc_status" class="form-label">
KYC Status
</label>
<div class="input-group">
<span class="input-group-text border-end-0 bg-transparent pe-0"><i class="bi bi-check"></i></span>
<input readonly type="text" id="kyc_status" class="form-control border-start-0" value="Success">
</div>
</div>
</div>
</form>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>

Answer 2

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 class="card">
<div class="card-body">
<form>
<div class="row mb-3">
<div class="col">
<label for="kyc_status" class="form-label">
KYC Status
</label>
<div class="pos">
<input readonly type="text" id="kyc_status" class="form-control" value="Success">
<i class="bi bi-check"></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:

Answer 3

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