javascript - 显示/隐藏密码弄乱了我的 CSS 代码

Question

显示/隐藏功能运行良好，但它与我的 CSS 文件混淆，因为它与 CSS 文件中添加的样式不一致。 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>

对于 JavaScript，我有:

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

每次勾选该复选框时，即使 CSS 文件另有说明，密码输入类型的位置也会向左上方移动。

对于 JS 部分，我使用了 this tutorial as a link.

Answer 1

您的 CSS 专门针对密码字段。

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

当它不再是密码字段时，它就失去了它的 CSS 规则。

给它一个 ID 或一个类，然后使用您的 CSS 规则来定位它。