The absence of an eye icon in the password field when using bootstrap 5

I'm having trouble positioning the eyeball icon to the right side of my form when using Bootstrap v5 and FontAwesome v5. Instead, the password field is being shifted further to the right compared to the username field, and the eye icon is not displaying as expected.

<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

Answer №1

Whenever the icon overlaps the input field, it gets hidden beneath the input tag. To resolve this issue, you should adjust the <i> tag with a higher z-index value. You can try using z-index: 100 to ensure that it remains visible above the input even when clicked.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0d6b6263796c7a687e626068206b7f68684d38233c382339">[email protected]</a>/css/fontawesome.min.css" integrity="sha384-jLKHWM3JRmfMU0A5x5AkjWkw/EYfGUAGagvnfryNV3F9VqM98XiIH7VBGVoxVSc7" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a8cac7c7dcdbdcdac9d8e89d86998698">[email protected]</a>/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>

UPDATE: If you wish to keep the password and username fields equal in width, consider placing the icon within the input-group-text component and removing the styles 

margin-left: -30px; z-index: 100;
. This is because input-group-text covers the input field.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2b4d44455f4a5c4e5844464e064d594e4e6b1e051a1e051f">[email protected]</a>/css/fontawesome.min.css" integrity="sha384-jLKHWM3JRmfMU0A5x5AkjWkw/EYfGUAGagvnfryNV3F9VqM98XiIH7VBGVoxVSc7" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a7c5c8c8d3d4d3d5c6d7e79289968997">[email protected]</a>/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>

Update 2: Your JavaScript code hides the eye icon by utilizing this.classList.toggle('fa-eye'). This method removes the 'fa-eye' class if present in the 'classList' of the 'togglePassword' element and adds it if not present.

If your intention is to toggle between showing and hiding password icons, such as the eye-slash icon for text display, you can include,

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

like so

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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="84e2ebeaf0e5f3e1f7ebe9e1a9e2f6e1e1c4b1aab5b1aab0">[email protected]</a>/css/fontawesome.min.css" integrity="sha384-jLKHWM3JRmfMU0A5x5AkjWkw/EYfGUAGagvnfryNV3F9VqM98XiIH7VBGVoxVSc7" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a5c7cacad1d6d1d7c4d5e5908b948b95">[email protected]</a>/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="fa 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="fa fa-lock"></i></span>
  <input class="form-control" id="password" name="password" placeholder="Password" value="">
  <span class="input-group-text">
    <i class="fa fa-eye" id="togglePassword" 
   style="cursor: pointer"></i>
   </span>
</div>

Answer №2

Illustration demonstrating the integration of feather icons using Jquery 3.3 and 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="16747979626562647766562338273825">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bad8d5d5cec9cec8dbcafa8f948b9489">[email protected]</a>/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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1e787b7f6a767b6c33777d71706d5e2a302c26302e">[email protected]</a>/dist/feather.min.js" integrity="sha384-uO3SXW5IuS1ZpFPKugNNWqTZRRglnUJK6UAZ/gxOX80nxEkN9NcGZTftn6RzhGWE" crossorigin="anonymous"></script>
</head>
<body>
  <div class="p-3 mb-3">
      <label class="form-label">Enter 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>

Answer №3

Consider including z-index:2; for your icon. To ensure that your eye icon remains visible when the input field is focused, you should incorporate the following CSS code:-

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

Additionally, kindly provide a visual or code snippet for your username field to allow us to better understand your request.

Note: It is recommended to minimize the use of inline CSS to avoid potential issues with debugging extensive CSS codes.

Answer №4

Utilizing Jquery version 3.6.0 along 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");
}});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

showcasing the picture in the email is consistently

I have created an email system that sends a message to users when they are active in the database, but I am experiencing an issue with the image not displaying. It is important for the image to appear automatically, just like Facebook's logo always sh ...

phphtmlcss

Different ways to position two header tags on top of each other instead of next to each other

I am attempting to adjust the placement of my header tags so that the second header sits directly below the first one, rather than side by side. Currently, I am using h1 and h2 tags for my headers. I have experimented with placing both headers inside an h ...

htmlcssheadertags

What is the best way to switch the visibility of a div on click from another div?

My goal is to make a div toggle visible or hidden when another div is clicked. The only connection between the two divs is that they are both nested within the same parent div. There's a DIV element with the class of "comment" which contains a DIV ele ...

javascriptjqueryhtmlcss

A guide on showcasing Python Flask database entries in an HTML table using Jinja 2

I have a database with a table that I need to display in my web application using a specific route. My goal is to present the data from the DB in a clear and easy-to-read table format, similar to an Excel spreadsheet, through the app. Although what I hav ...

pythonhtmlflask

Displaying checkbox values with JavaScript

How can I display multiple checkbox values when checked in HTML code? Whenever I check a checkbox, I want its value to be shown alongside the previously checked values. Right now, my code only displays one value at a time. Any suggestions on how to achie ...

javascriptjqueryhtml

The XPath function $x() will always return an array, regardless of whether or not an index is specified

How can I target the div elements that have the class "month-table_col" (selecting by month). ... <div class="month-table"> <div class="month-table_row"> <div class="month-table_col">Jan ...

htmlcssxmlxpathweb-scraping

What is the best way to align a button with a title on the right side of a page?

Is it possible to align my button to the top right, at the same height as the title in my design? Here is an example: view image here This is what I have achieved so far: view image here I suspect there may be an issue with my divs. The button doesn&a ...

cssbootstrap-4bootstrap-5

What is the most effective way to extract content values from different divs for calculation using jQuery?

I am working on creating a function that retrieves the content values from the <div class="rowtabela"> div and reads the nodes of <div class="item v_...">. Check out my code below: <div class="adicionados" id=& ...

javascripthtmljqueryajax

limitation in bootstrap ensures that only one collapse element is open at any

Hey, can someone help me fix this code? I'm trying to make it so that only one element opens at a time, but I can't seem to figure out how. Right now, if I click on two elements, they both open and the other one doesn't close. This is what ...

javascripthtmlbootstrap-4

A guide on linking to different sections on your webpage with Framework7

Exploring the traditional method of linking to specific sections on a webpage, where the anchor tag points to an element's ID within the page. Here is an example: <div class="main" id="section1"> <h2>Section 1</h2& ...

htmlscrollhyperlinkhtml-framework-7

Aligning Text Vertically with an Image in ul/li List Items

Apologies if this question has already been asked, but I've checked several similar inquiries in an attempt to merge the solution without much luck. I currently have a bootstrap row with two col-md-6's. The first column contains an image, while t ...

htmlcsstwitter-bootstrapvertical-alignment

Having issues when dynamically adding options to a multiselect dropdown

I'm working on dynamically adding options to a multiselect using AJAX: <select size='2' name="CraftCode" id=@ccrf class="form-control js-select manualentrydd" ></select> $.ajax({ type: "GET", url: "GetCraftCodes", data: ...

javascriptjqueryhtmlajaxmulti-select

Can the font size of a container be adjusted proportionally to its width or height using only CSS?

When it comes to ensuring that the font always fits nicely within its container, I rely on using Javascript to set divs or specific class to have their font-size dynamically equal to their width, and adjust their inner text elements accordingly. If you wa ...

htmltwitter-bootstrapcssresponsive-design

Instructions for implementing tooltips on a pie chart slice when hovering with the mouse pointer, using the canvas

var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var cw = canvas.width; var ch = canvas.height; ctx.lineWidth = 2; ctx.font = '14px verdana'; var PI2 = Math.PI * 2; var myColor = ["Gr ...

javascriptjqueryhtmlcanvas

What is the best way to remove <a> tags from an XML document?

I'm dealing with <a> tags within an XML file and I need to remove only the <a> tags. For instance: <test>This is a line with <a name="idp173968"></a> tags in it</test> I am unable to use str_replace to replace t ...

phphtmlregexxmlpreg-replace

Having trouble locating the Nativescript-theme-core file for your Nativescript application?

I'm currently working on a basic barcode scanner app and encountering an unusual error once the app is deployed to a Genymotion emulator. It appears to be searching for the core theme in the incorrect location. Any thoughts on why this issue is occurr ...

cssangularnativescript

The console is not displaying the data from the useForm

I am working on a project to create a Gmail clone. I have implemented the useForm library for data validation. However, when I input data into the form and try to print it to the console, nothing is being displayed. const onSubmit = (data) => { ...

javascripthtmlcssreactjsredux

The Art of Repeating: Navigating through a Multi-Layered Array

My PHP Array looks like this: $fruits = array( array("Apple", 1.25), array("Banana", 0.86), ); Desired HTML Output: I want the HTML output to be formatted as follows: Fruit: Apple Price: 1.25 Fruit: Banana Price: 0.86 Attempts Made: I tried ...

htmlarraystwig

"Position the label on the left and input on the right for

Having trouble with label and input alignment - I've attempted: <div class="form-group"> <label class="control-label" for="" style="float: left;font-size: 20px;padding-right: 10px;">ID : </label> <input style= ...

htmlcss

How can you use JavaScript to create hyperlinks for every occurrence of $WORD in a text without altering the original content?

I've hit a bit of a roadblock. I'm currently working with StockTwits data and their API requires linking 'cashtags' (similar to hashtags but using $ instead of #). The input data I have is This is my amazing message with a stock $sym ...

javascripthtmlreactjs