How to Add a Password Eye Icon in HTML | Toggle Password Visibility Tutorial

view on Youtube

If you’re building a Java-based application with a web frontend, integrating modern HTML/CSS designs can greatly enhance user experience. Here’s a stylish password input field with an eye icon to toggle password visibility and a clear icon to reset the input. Let’s explore how to integrate it into your Java project seamlessly.

HTML code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Password Eye Icon</title>
    <link rel="stylesheet" href="style.css" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css"
      integrity="sha512-5Hs3dF2AEPkpNAR7UiOHba+lRSJNeM2ECkwxUIxC1Q/FLycGTbNapWXB4tP889k5T5Ju8fs4b1P5z/iB4nMfSQ=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
  </head>
  <body>
    <div class="password-input-wrapper">
      <input
        type="password"
        id="password"
        class="password-input"
        placeholder="Enter your secert code"
      />
      <span class="toggle-password" onclick="togglePasswordVisibility()">
        <i class="fa-solid fa-eye" id="toggle-icon"></i>
      </span>
      <span class="clear-password" onclick="clearPasswordField()">
        <i class="fa-solid fa-xmark" id="clear-icon"></i>
      </span>
    </div>
    <script src="script.js"></script>
  </body>
</html>

CSS code

*{
    padding:0;
    margin: 0;
    box-sizing: border-box;
}

body{
    font-family: 'Courier New', Courier, monospace;
    display: flex;
    justify-content: center;
    align-items: center;
    height:100vh;
    background-color: #000;
    color:#0f0;
}

.password-input-wrapper{
    width: 400px;
    position: relative;
}

.password-input{
    width: 100%;
    padding: 12px 15px;
    font-size: 18px;
    color:#0f0;
    background-color: #000;
    border: 1px solid #0f0;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    font-family: 'Courier New', Courier, monospace;
    caret-color: #0f0;
}

.password-input::placeholder{
    color:#088008;
    font-style: italic;
}

.password-input:focus{
    box-shadow: 0 0 10px #0f0;
}

.toggle-password,.clear-password{
    position: absolute;
    top:50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);

    cursor: pointer;
    color:#0f0;
    font-size: 18px;
}

.toggle-password{
    right:45px;
}

.clear-password{
    right:10px;
}

.toggle-password:hover,.clear-password:hover{
color:#00ff99;
}

Javascript code

function clearPasswordField() {
  const passwordInput = document.getElementById("password");
  passwordInput.value = "";
}

function togglePasswordVisibility() {
  const passwordInput = document.getElementById("password");
  const toggleIcon = document.getElementById("toggle-icon");

  if (passwordInput.type === "password") {
    passwordInput.type = "text";
    toggleIcon.classList.remove("fa-eye");
    toggleIcon.classList.add("fa-eye-slash");
  } else {
    passwordInput.type = "password";
    toggleIcon.classList.remove("fa-eye-slash");

    toggleIcon.classList.add("fa-eye");
  }
}

Integrate this front-end code in your Java application.

Leave a Comment Cancel Reply