Show/Hide Password messing with my css code

Question

Show/Hide Functionality is working well, but it is messing up with my CSS file as it doesn't align with the style added in the CSS file. Here is the code for my file.

<div class="div-pwd">
    <label for="password" class="pwd">Password: </label>
        <input type="password" placeholder="Password" name="password" id="pwd" required>
 </div>
     <input type="checkbox" onclick="showPassword(this);">
         <label class="showpwd">Show Password</label>
         <button type="submit" name="login_user" >Login</button>

And for JavaScript I have:

function showPassword(check_box) { 
      var temp = document.getElementById("pwd"); 
      if (check_box.checked) { 
        temp.setAttribute("type","text") ;
      } 
      else {
        temp.setAttribute("type","password");
      } 
    }

Every time the checkbox is ticked, the position of the password input type shifts towards the top left even if the CSS file has stated otherwise.

For the JS part I've used this tutorial as a link.

Answer 1

Your CSS is specifically targeted to a password field.

.div-pwd input[type="password"]

When it ceases to be a password field, it loses its CSS rules.

Give it an ID or a class and target that with your CSS rules instead.