Show and Hide Password using JavaScript in Login Form

HTML

<head>
  <title>Show and Hide Password using JavaScript</title>
</head>

</body>

</html>

CSS

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

body {
      display: flex;
      justify-content: center;
      align-items: center;
    }

section {
      width: 100%;
      display: flex;
      justify-content: center;
    }

.heading {
      font-size: 24px;
      font-weight: 700;
      color: #333;
    }

.form-main-div {
      background: #fdfffd;
      border: 1px solid #00ff6a;
      box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.03);
      border-radius: 8px;
      padding: 60px;
      text-align: center;
      margin-top: 30px;
      width: 640px;
    }

.form-inner-div {
      position: relative;
      width: 100%;
    }

.input-div {
      position: relative;
      max-width: 370px;
      margin: 0 auto;
      margin-top: 1rem;
    }

.input-div input {
      width: 100%;
      border: 1px solid #B8B8B8;
      border-radius: 5px;
      height: 50px;
      padding: 0 1.5rem 0 3.5rem;
      font-size: 18px;
      color: #333333;
    }

.input-div input:focus {
      outline: none;
      box-shadow: none;
    }

.input-div input::placeholder {
      font-size: 18px;
      color: #B0B0B0;
    }

.input-div .auth-left-icon {
      position: absolute;
      left: 0;
      top: 0;
      width: 50px;
      height: 50px;
      border: 1px solid #B8B8B8;
      border-radius: 5px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

.inputEyeIcon {
      position: absolute;
      top: 50%;
      right: 15px;
      transform: translateY(-50%);
      cursor: pointer;
    }

.form-inner-div .submitButton {
      width: 250px;
      height: 50px;
      background: #000aff;
      border-radius: 8px;
      font-weight: 600;
      font-size: 20px;
      text-align: center;
      color: #FFFFFF;
      margin-top: 25px;
      border: 1.5px solid #000aff;
      cursor: pointer;
    }

.form-inner-div .submitButton:hover {
      background: #ffffff;
      color: #000aff;
    }

@media (max-width:672px) {
      .form-main-div {
        width: 100%;
        padding: 25px;
      }
    }

Ui Code Snippets

Show and Hide Password using JavaScript in Login Form

HTML

CSS

JS

Output

Network Marketing

SEO Course

Our Courses

Our Tutorials

Ui Code Snippets

Popular Notes

Ui Code Snippets

Show and Hide Password using JavaScript in Login Form

HTML

CSS

JS

Output

Network Marketing

SEO Course