The visibility of the eye icon on the password field may vary, occasionally appearing and disappearing from view

Here is the code for my login form password field (I'm using bootstrap 4):

<div class="form-account-label-input">
   <label> Password <span class="star-red">&nbsp;*</span></label>
   <input type="password" id="Password" name="Password" class="w-100">                                 
</div>

Unexpectedly, an eye icon appears when I start typing in the password field. This is how it looks:

https://i.sstatic.net/KvPMI.jpg

I didn't include any eye icon in my code, so where is it coming from? The strange part is that the eye icon shows up inconsistently - sometimes it's there and other times it isn't. How can I disable this and set my own eye icon in the code?

Update

I discovered that the eye icon only appears on Edge browser, not on Chrome.

htmlcssbootstrap-4

Answer №1

Below is the code snippet for password visibility toggle functionality:

CSS:


  /* Password Toggle Start */
      .password-section {
         position: relative;
         display: inline-block;
      }

      .password-section .fa-eye {
         position: absolute;
         top: 76%;
         right: 22px; /* Adjust this value to control the icon's position */
         transform: translateY(-50%);
         cursor: pointer;
      }
      .password-section .fa-eye-slash {
         position: absolute;
         top: 76%;
         right: 22px; /* Adjust this value to control the icon's position */
         transform: translateY(-50%);
         cursor: pointer;
      }

   /* Password Toggle End */

HTML:

<div class="col-xs-12 password-section">
      
  <input class="form-control input-lg" id="password-field" name="password" type="Password">
  <span class="fa fa-eye " id="togglePassword"  ></span>

</div>

JQuery:

<script>
  $(document).ready(function () {
  
     //  Toggle  Password Start
     $("#togglePassword").removeClass("fa fa-eye").addClass("fa fa-eye-slash");
     $("#togglePassword").click(function() {
        const passwordInput = $("#password-field");
        const type = passwordInput.attr("type");

        if (type === "password") {
            passwordInput.attr("type", "text");
            $("#togglePassword").removeClass("fa fa-eye-slash").addClass("fa fa-eye");
        } else {
            passwordInput.attr("type", "password");
            $("#togglePassword").removeClass("fa fa-eye").addClass("fa fa-eye-slash");
        }
    });
    //  Toggle  Password End
    
  });

</script>

Answer №2

this code is ideal for my needs

    input::-webkit-reveal,
    input::-webkit-clear {
        visibility: hidden;
    }

Answer №3

**Give this a shot**
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href=
  "https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9bf9f4f4efe8efe9faebb6f2f8f4f5e8dbaab5a8b5ab">[email protected]</a>/font/bootstrap- 
  icons.css" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384
ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous">
<style>
form i {
  margin-left: -30px;
  <h1>Sign In</h1>
  cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<form>
        <p>
            <label>Password:</label>
            <input type="password"
                name="password" id="password" />
            <i class="bi bi-eye-slash"
                id="togglePassword"></i>
        </p>
    </form>
</div>
<script>
    const togglePassword = document
        .querySelector('#togglePassword');

    const password = document.querySelector('#password');

    togglePassword.addEventListener('click', () => {

        // Toggle the type attribute using
        // getAttribure() method
        const type = password
            .getAttribute('type') === 'password' ?
            'text' : 'password';
            
        password.setAttribute('type', type);

        // Toggle the eye and bi-eye icon
        this.classList.toggle('bi-eye');
    });
</script>
</body>
</html>

Answer №4

$(".toggle-password").click(function() {

  $(this).toggleClass("fa-eye fa-eye-slash");
  var input = $($(this).attr("toggle"));
  if (input.attr("type") == "password") {
    input.attr("type", "text");
  } else {
    input.attr("type", "password");
  }
});
.field-icon {
  float: right;
  margin-left: -25px;
  margin-top: -25px;
  position: relative;
  z-index: 2;
}

.container{
  padding-top:50px;
  margin: auto;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="row">
  <div class="col-md-4 col-md-offset-4">

    <div class="panel panel-default">
      <div class="panel-body">
        <form class="form-horizontal" method="" action="">
          <div class="form-group">
            <label class="col-md-4 control-label">Password</label>
            <div class="col-md-6 ">
              <input id="password-field" type="password" class="form-control" name="password" value="Password123">
              <span toggle="#password-field" class="fa fa-fw fa-eye field-icon toggle-password"></span>
       `   </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
</div>

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

Sending an array through HTML select using Jquery

Is this scenario possible: I have implemented an Ajax call to fetch results from a SQL query. The data is retrieved in an array format, which I then convert to JSON and output at the end of a PHP script that the Ajax function calls. Next, for each row in ...

jqueryhtmlarraysselect

Transform text that represents a numerical value in any base into an actual number

Looking to convert a base36 string back to a double value. The original double is 0.3128540377812142. When converting it to base 36: (0.3128540377812142).toString(36); The results are : Chrome: 0.b9ginb6s73gd1bfel7npv0wwmi Firefox: 0.b9ginb6s73e Now, h ...

javascriptjqueryajaxhtml

Positioning bar chart columns and text using CSS

My component generates HTML for a simple bar chart, with the height and background color computed within the component. Everything functions correctly, but I am facing an issue where long text causes displacement of the bar above it. Another problem is th ...

htmlcssgraphicstailwind-cssvisualization

Incrementing the image name by 1 each time a new image is added to the directory

Currently honing my PHP skills and in the learning process. Developed a simple script that enables users to upload images to a directory on the server. I aim to append a number at the end of each image name to prevent duplication. Here is my attempt at i ...

phphtmlimageupload

Discrepancy in image dimensions between Android and iOS

Currently, I am in the process of building a website and have encountered an issue with the display of images on Android and iOS phones. The image appears differently on an Android Galaxy J-5 compared to an iOS iPhone 6s screen. My goal is to make it look ...

androidhtmlcssiosreactjs

Moving from one section to the next within a web page

I am looking to add animation to my web app. When clicked, I want to move only the ID table column from one div to another div while hiding the other column. However, I am struggling with figuring out how to animate the movement of the ID column (from the ...

javascripthtmlcssangularjs

Developing and integrating views within a node-webkit desktop application

For my file copier desktop application built with node webkit, I aim to create a seamless flow where the initial check for existing profile data determines the first page displayed. The header with static links/buttons to various views remains consistent ...

javascripthtmlcssnode.jsnode-webkit

Using Angular components to manipulate the CSS in the DOM

Struggling with dom manipulation in an angular/node.js environment using typescript for my visualcomponent.html The second inline styling works fine, showing the h1 in blue color. However, I run into issues when trying to embed strings within the innerHTM ...

javascripthtmlcssangulartypescript

Creating dynamic dropdowns with Ajax and HTML on the code side

I have developed a script that generates a drop-down menu and updates the .box div with a new color and image. Below is the HTML & Java code: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <div> ...

javascriptjqueryhtmlcss

What is the best way to use CSS to center two blocks with space in between them?

My goal is to achieve a specific design: I want two text blocks with some space in between them aligned around the midline of the page (refer to the image). I have experimented with the float property, as well as used margin and padding to create the gap ...

htmlcssalignment

How to retrieve text from the <td> element with Selenium

Currently, I am trying to extract the value enclosed within the <td> tag containing 30.0000 from a table using Selenium. However, every time I attempt to retrieve it, I receive 0.0000 instead. The method I have used so far is findElementByXPath(".//* ...

c#htmlselenium

Transform **kerry James O'keeffe-martin** into **Kerry James O'Keeffe-Martin** using TypeScript and Java Script

Is there a way to capitalize names in both TypeScript and JavaScript? For example, changing kerry James O'keeffe-martin to Kerry James O'Keeffe-Martin. ...

javascripthtmltypescript

What is the best way to "leap" a sole transform value within an animation?

I need to create an animation that makes a transform function value "jump" in an animation. Within my @keyframes rule are three percentages with the transform property in each one. I specifically want only the scale to transition from 0.5 to 1 between the ...

csscss-animationscss-transforms

CSS "background-position: bottom" Less than ideal performance on Mobile Browsers

body { background-color: #000000; background-image: url('http://upload.wikimedia.org/wikipedia/commons/thumb/6/61/Aurigids_-_Jeremie_Vaubaillon.jpg/1280px-Aurigids_-_Jeremie_Vaubaillon.jpg'); background-repeat: no-repeat; background-attac ...

htmlcssweb

Select the radio button by hovering the mouse over it

Is there a way to check my radio buttons when hovering over them without having to click? I want to display photos based on the selected radio button. I attempted this using JQuery, but I am still learning and consider myself a beginner. ...

jqueryhtmlcss

What is the best way to separate one dropdown area from another dropdown area?

I have two dropdown menus where, when an option with the value "other" is clicked, it generates a text area just below the dropdown menu. Both sections are functioning correctly, but I had to create separate parent wrappers for each in order to do so. How ...

javascriptjqueryhtmldynamic

Press the Concealed Button Enclosed in a div Using Selenium with Python

Currently, I am in the process of automating the login on the Workday portal by utilizing Chrome WebDriver in Selenium. My main challenge lies in figuring out how to click on a hidden sign-in button with the following properties: <div class="css-1s ...

pythonhtmlselenium-webdriverwai-ariahidden-field

Is there a way to prevent the context menu from appearing when tapping on an image on a mobile phone?

When attempting to move an image on the screen with a touch event, a popup appears in Chrome when pressing and holding the image. This popup usually includes options to save the image. Is there a way to disable this popup so I can freely move the image w ...

javascripthtmlcss

td having no line breaks causing text to extend beyond the cell

I have a challenge with using the nowrap property on td elements to ensure proper formatting of my tables. In the first table, everything wraps nicely, but in the second table, the content in the first "td" exceeds its designated space due to length. How c ...

htmlcsshtml-tableword-wrap

The uninterrupted execution of a server-side script is occurring without the need for

Greetings! I am currently working on a web project that combines HTML5 and Java with the Hibernate framework, utilizing AJAX as a bridge between them. My approach involves developing servlets that are connected to HTML5 forms and use AJAX to send data. Ho ...

javaajaxhtmlhibernateservlets