Place input next to icon-CodePudding

I want to to add an eye on my bootstrap input as:

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<div >
  <label  for="current">Current Password</label>
  <input asp-for="ChangePassword.OldPassword"  required autofocus />
  <button  type="button" id="password-addon" tabindex="99"><i ></i></button>
  <span asp-validation-for="ChangePassword.OldPassword" ></span>
</div>

CodePudding user response：

Checkout input group, button addons: https://getbootstrap.com/docs/5.2/forms/input-group/#button-addons

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<div >
  <label  for="current">Current Password</label>
  <div >
    <input asp-for="ChangePassword.OldPassword"  required autofocus />
    <button  type="button" id="password-addon" tabindex="99"><i ></i></button>
  </div>
  <span asp-validation-for="ChangePassword.OldPassword" ></span>
</div>

CodePudding user response：

You can easily achieve this by bootstrap Input Group. See the example below.

For more details: https://getbootstrap.com/docs/4.0/components/input-group/

 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />

<div >
   <label  for="current">Current Password</label>
   <div >
      <input asp-for="ChangePassword.OldPassword"  required autofocus />
     <div >
        <button  type="button" id="password-addon" tabindex="99"><i ></i></button>
    </div>
   </div>
  <span asp-validation-for="ChangePassword.OldPassword" ></span>
</div>