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>