'Eye in password field does not appear using bootstrap 5

When using Bootstrap v5 and FontAwesome v5, I cannot get get the eyeball to appear to the right side of the form. Instead, it pulls the password field further to the right than the username field and the eye does not show.

<div class="input-group mb-3">
   <span class="input-group-text"><i class="fas fa-lock"></i></span>
   <input class="form-control" id="username" name="username" placeholder="Username" value="">
</div>

<div class="input-group mb-3">
   <span class="input-group-text"><i class="fas fa-lock"></i></span>
   <input class="form-control" id="password" name="password" placeholder="Password" value="">
   <span class="input-group-text"><i class="far fa-eye-slash" id="togglePassword"></i></span>
</div>

Javascript

const togglePassword = document.querySelector("#togglePassword");
const password = document.querySelector("#password");

togglePassword.addEventListener("click", function () {
   
// toggle the type attribute
const type = password.getAttribute("type") === "password" ? "text" : "password";
password.setAttribute("type", type);

// toggle the eye icon
this.classList.toggle('fa-eye');
});
htmlcssbootstrap-5font-awesome-5


Solution 1:[1]

When the icon overlaps the input, it goes beneath the input tag. To fix this you need to set the <i> tag with a higher z-index value. Try with z-index: 100 to make it appear on top even when the input is clicked.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/fontawesome.min.css" integrity="sha384-jLKHWM3JRmfMU0A5x5AkjWkw/EYfGUAGagvnfryNV3F9VqM98XiIH7VBGVoxVSc7" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<div class="input-group mb-3">
   <span class="input-group-text"><i class="fas fa-lock"></i></span>
   <input class="form-control" id="password" name="password" placeholder="Password" value="">
   <i class="far fa-eye" id="togglePassword" 
   style="cursor: pointer; margin-left: -30px; z-index: 100;"></i>
</div>

EDIT: If you want the password field and the username field to be in the same width, you can try wrapping the icon inside the input-group-text and remove the styling margin-left: -30px; z-index: 100; since input-group-text overlaps over the input field.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/fontawesome.min.css" integrity="sha384-jLKHWM3JRmfMU0A5x5AkjWkw/EYfGUAGagvnfryNV3F9VqM98XiIH7VBGVoxVSc7" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">

<div class="input-group mb-3">
  <span class="input-group-text"><i class="fas fa-lock"></i></span>
  <input class="form-control" id="username" name="username" placeholder="Username" value="">
</div>

<div class="input-group mb-3">
  <span class="input-group-text"><i class="fas fa-lock"></i></span>
  <input class="form-control" id="password" name="password" placeholder="Password" value="">
  <span class="input-group-text">
    <i class="far fa-eye" id="togglePassword" 
   style="cursor: pointer"></i>
   </span>
</div>

Edit 2: In your JavaScript code, you are hiding the eye icon with this.classList.toggle('fa-eye'). This function removes the class fa-eye when it is available in the classList of the togglePassword element and adds the above class when it is not available.

I assume that you want to show hide password icons which might be the eye-slash icon when the user is currently in the text format. So you can add

this.classList.toggle('fa-eye-slash');

as below

const togglePassword = document.querySelector("#togglePassword");
const password = document.querySelector("#password");

togglePassword.addEventListener("click", function () {
   
  // toggle the type attribute
  const type = password.getAttribute("type") === "password" ? "text" : "password";
  password.setAttribute("type", type);
  // toggle the eye icon
  this.classList.toggle('fa-eye');
  this.classList.toggle('fa-eye-slash');
});
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/fontawesome.min.css" integrity="sha384-jLKHWM3JRmfMU0A5x5AkjWkw/EYfGUAGagvnfryNV3F9VqM98XiIH7VBGVoxVSc7" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">

<div class="input-group mb-3">
  <span class="input-group-text"><i class="fas fa-lock"></i></span>
  <input class="form-control" id="username" name="username" placeholder="Username" value="">
</div>

<div class="input-group mb-3">
  <span class="input-group-text"><i class="fas fa-lock"></i></span>
  <input class="form-control" id="password" name="password" placeholder="Password" value="">
  <span class="input-group-text">
    <i class="far fa-eye" id="togglePassword" 
   style="cursor: pointer"></i>
   </span>
</div>

Solution 2:[2]

Try adding z-index:2; to your icon. To prevent your eye icon being hidden when the input field is focused, you would need to add the following css code:-

<style>
#password:focus ~ .far-fa-eye{
margin-left: -30px !important; 
cursor: pointer !important;
z-index: 5 !important;
}
</style>

Also, please share us a visual or code for your username field so that we can get a better view of what you mean.

PS: I would prefer to avoid inline css as much as possible. Inline css might be troublesome when it comes to debugging large css codes.

Solution 3:[3]

Implementation Jquery 3.6.0 with Bootstrap 5

HTML

<div class="mb-3">
    <label class="form-label">Password</label>
    <div class="input-group mb-3">
        <input class="form-control password" id="password" class="block mt-1 w-full" type="password" name="password" required />
        <span class="input-group-text">
            <i class="far fa-eye-slash" id="togglePassword"
            style="cursor: pointer"></i>
        </span>
    </div>
</div>

JS

$(".togglePassword").click(function (e) {
e.preventDefault();
var type = $(this).parent().parent().find(".password").attr("type");
console.log(type);
if(type == "password"){
    $(this).removeClass("fa-eye-slash");
    $(this).addClass("fa-eye");
    $(this).parent().parent().find(".password").attr("type","text");
}else if(type == "text"){
    $(this).removeClass("fa-eye");
    $(this).addClass("fa-eye-slash");
    $(this).parent().parent().find(".password").attr("type","password");
}});

Solution 4:[4]

Example using feather icons with Jquery 3.3 with Bootstrap 5

  feather.replace({ 'aria-hidden': 'true' });

$(".togglePassword").click(function (e) {
      e.preventDefault();
      var type = $(this).parent().parent().find(".password").attr("type");
      console.log(type);
      if(type == "password"){
          $("svg.feather.feather-eye").replaceWith(feather.icons["eye-off"].toSvg());
          $(this).parent().parent().find(".password").attr("type","text");
      }else if(type == "text"){
          $("svg.feather.feather-eye-off").replaceWith(feather.icons["eye"].toSvg());
          $(this).parent().parent().find(".password").attr("type","password");
      }
  });
<html>
<head>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/feather.min.js" integrity="sha384-uO3SXW5IuS1ZpFPKugNNWqTZRRglnUJK6UAZ/gxOX80nxEkN9NcGZTftn6RzhGWE" crossorigin="anonymous"></script>
</head>
<body>
  <div class="p-3 mb-3">
      <label class="form-label">Password</label>
      <div class="input-group mb-3">
          <input class="form-control password" id="password" class="block mt-1 w-full" type="password" name="password" value="secret!" required />
          <span class="input-group-text togglePassword" id="">
              <i data-feather="eye" style="cursor: pointer"></i>
          </span>
      </div>
  </div>
</body>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2
Solution 3 Sanmit Pawar
Solution 4 shuckc

Related Questions