html toggle visibility password inside the input

Issue

I’m learning html/css, I’m doing a registration form and I’d like to put the eye toggle to show the password inside the password input field, there is a way to do it to keep the scalability in the different resolutions? Searching online I think that I have to put them in a container and then use css but if I try to do it changing the container in css the whole my form breaks…

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Index Registration</title>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link rel= "stylesheet" href="../css/bootstrap.min.css" />
    <link rel="stylesheet" href="../css/style.css">
    <script src="../js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
    <div class="main">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-md-6 col-9">
                    <div class="login-wrap py-3 px-4">
                        <h2 style="color: #FFF; text-align: center;" class="text-uppercase text-center mb-5">Create new Account</h2>
                        <form class="form-sigin" action="../home/index.php" name="formRegistration" id="formRegistration"  method="post">
                            <div class="row">
                                <div class="col-md-6 mb-4">
                                    <div class="form-group">
                                        <label class="form-label" for="firstNameNewUser" style="margin-left: 0px;">First Name</label>
                                        <input type="text" name ="firstNameNewUser" id="firstNameNewUser" size="40" maxlength="40" class="form-control" required autofocus/>
                                    </div>
                                </div>
                                <div class="col-md-6 mb-4">
                                    <div class="form-group">
                                        <label class="form-label" for="lastNameNewUser">Last Name</label>
                                        <input type="text" name ="lastNameNewUser" id="lastNameNewUser" size="40" maxlength="40" class="form-control" required autofocus/>
                                    </div>
                                </div>
                            </div>

                            <div class="control mb-4">
                                <label class="form-label" for="nickNewUser">Your Nickname</label>
                                <input type="text" name ="nickNewUser" id="nickNewUser" size="40" maxlength="40" class="form-control" required autofocus/>
                            </div>

                            <div class="control mb-4">
                                <label class="form-label" for="emailNewUser">Your Email</label>
                                <input type="email" name ="emailNewUser" id="emailNewUser" size="40" maxlength="40" class="form-control" required autofocus/>
                            </div>

                            <div class="control mb-4">
                                <label class="form-label" for="passwordNewUser">Password</label>
                                <input type="password" name ="passwordNewUser" id="passwordNewUser" size="40" maxlength="40" class="form-control" required autofocus/>
                                <i> <span class="material-icons">visibility</span> </i>
                            </div>

                            <div class="control mb-4">
                                <label class="form-label" for="rPasswordNewUser">Repeat your password</label>
                                <div class="parent inline-flex-parent">
                                    <div class="child">
                                        <input type="password" name ="rPasswordNewUser" id="rPasswordNewUser" size="40" maxlength="40" class="form-control" required autofocus/>
                                    </div>
                                    <div class="child">
                                        <i> <span class="material-icons">visibility</span> </i>
                                    </div>
                                </div>
                            </div>

                            <div class="form-check" id="form-checkbox">
                                <input
                                    class="form-check-input me-2"
                                    type="checkbox"
                                    value=""
                                    name="checkboxterms"
                                    id="checkboxterms"
                                />
                                <label class="form-check-label" for="checkboxterms" name="checkboxtermslabel" id="checkboxtermslabel">
                                    I agree all statements in <a href="#!">Terms of service</a>
                                </label>
                            </div>
                            
                            <p id="spacing">&nbsp;</p> 

                            <div class="d-flex justify-content-center">
                                <div style="clear:both;"></div>
                                <button type="submit" id = "registerButton" name="registerButton" class="btn btn-primary rounded submit p-2 px-4">Register</button>
                            </div>
                            
                            <p class="text-center text-muted mt-5 mb-0">Have already an account? 
                                <a href="../login/index.php" class="text-white"><u>Login here</u></a>
                            </p>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

EDIT:
the current password code you see are just some tests that I’m doing, If I don’t put the passw input field and the inside a div, then they will be put one over the other, so I created a div to put them side by side… by also like this, if the resolution change then the eye icon will not be in the right place

Solution

This is how I implement pw visibility. As far as scalability, if you use Bootstrap’s sizing classes it should all scale well. I’ve had no issues moving this between assorted screen sizes.

Addendum : centering the Eye

I modified the second password field.
To properly vertically center it I had to alter the html. Compare against the first password HTML.

In particular:

  1. wrapped the "eye" containing div and the input in it’s own relative div. (position-relative moved from outer div.control
  2. Added Bootstrap class h-100 to the "eye" div
  3. Added bootstrap class align-middle to the "eye" and
  4. Created an actual rule for .pw-toggle that sets height: 1rem; so that align-middle centers correctly.
$(function() {
  $("span.pw-toggle, span.pw-toggle2").click(function() {
    var $pwField = $($(this).data().target);
    var TorP = $pwField.attr('type') == 'password' ? 'text' : 'password';
    $(this).text(TorP === "password" ? "visibility" : "visibility_off")
    $pwField.attr('type', TorP);
  });
});
span[data-target] {
  cursor: pointer;
}

.pw-toggle {
  height: 1rem;
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <div class="main">
    <div class="container">
      <div class="row justify-content-center">
        <div class="col-md-6 col-9">
          <div class="login-wrap py-3 px-4">
            <h2 style="color: #FFF; text-align: center;" class="text-uppercase text-center mb-5">Create new Account</h2>
            <form class="form-sigin" action="../home/index.php" name="formRegistration" id="formRegistration" method="post">
              <div class="row">
                <div class="col-md-6 mb-4">
                  <div class="form-group">
                    <label class="form-label" for="firstNameNewUser" style="margin-left: 0px;">First Name</label>
                    <input type="text" name="firstNameNewUser" id="firstNameNewUser" size="40" maxlength="40" class="form-control" required autofocus/>
                  </div>
                </div>
                <div class="col-md-6 mb-4">
                  <div class="form-group">
                    <label class="form-label" for="lastNameNewUser">Last Name</label>
                    <input type="text" name="lastNameNewUser" id="lastNameNewUser" size="40" maxlength="40" class="form-control" required autofocus/>
                  </div>
                </div>
              </div>

              <div class="control mb-4">
                <label class="form-label" for="nickNewUser">Your Nickname</label>
                <input type="text" name="nickNewUser" id="nickNewUser" size="40" maxlength="40" class="form-control" required autofocus/>
              </div>

              <div class="control mb-4">
                <label class="form-label" for="emailNewUser">Your Email</label>
                <input type="email" name="emailNewUser" id="emailNewUser" size="40" maxlength="40" class="form-control" required autofocus/>
              </div>

              <div class="control mb-4 position-relative">
                <label class="form-label" for="passwordNewUser">Password</label>
                <div class="position-absolute end-0 me-1">
                  <span data-target="#passwordNewUser" class="pw-toggle material-icons pr-1">visibility</span>
                </div>
                <input type="password" name="passwordNewUser" id="passwordNewUser" size="40" maxlength="40" class="form-control" required autofocus/>
              </div>

              <div class="control mb-4">
                <label class="form-label" for="rPasswordNewUser">Repeat your password</label>
                <div class="position-relative">
                  <div class="position-absolute end-0 me-1 h-100">
                    <span data-target="#rPasswordNewUser" class="pw-toggle material-icons pr-1 align-middle">visibility</span>
                  </div>
                  <input type="password" name="rPasswordNewUser" id="rPasswordNewUser" size="40" maxlength="40" class="form-control" required autofocus/>
                </div>
              </div>

              <!-- Just for fun, the eye as a Bootstrap input 
              addon is much cleaner -->

              <div clas="control mb-4">
                <div class="input-group">
                  <input type="password" name="r2PasswordNewUser" id="r2PasswordNewUser" size="40" maxlength="40" class="form-control" required autofocus/>
                  <span class="input-group-text">
                  <span data-target="#r2PasswordNewUser" class="pw-toggle2 material-icons">visibility</span>
                  </span>
                </div>
              </div>

              <div class="form-check" id="form-checkbox">
                <input class="form-check-input me-2" type="checkbox" value="" name="checkboxterms" id="checkboxterms" />
                <label class="form-check-label" for="checkboxterms" name="checkboxtermslabel" id="checkboxtermslabel">
                                    I agree all statements in <a href="#!">Terms of service</a>
                                </label>
              </div>

              <p id="spacing">&nbsp;</p>

              <div class="d-flex justify-content-center">
                <div style="clear:both;"></div>
                <button type="submit" id="registerButton" name="registerButton" class="btn btn-primary rounded submit p-2 px-4">Register</button>
              </div>

              <p class="text-center text-muted mt-5 mb-0">Have already an account?
                <a href="../login/index.php" class="text-white"><u>Login here</u></a>
              </p>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

Answered By – fnostro

Answer Checked By – Marie Seifert (AngularFixing Admin)

Leave a Reply

Your email address will not be published.