Question

我正在尝试为password创建相同的效果，但是无法正常工作。

用户名部分工作正常，因此我只使用了用户名中相同的代码作为密码，并将选择器更改为密码类。 CSS and HTML code

该如何解决？

Answer 1

您还使用了相同的id作为密码。

将ID更改为pwd，它可以正常工作。

Codepen Link

Answer 2

您的主要问题是复制粘贴：您有两个具有相同ID的元素nme，这虽然不合法，但浏览器比较宽容。您还具有两个都指向nme的标签，它们无法区分，因此都指向第一个标签。

Answer 3

您正在为两个元素使用相同的ID，只需更改第二个元素中的ID。检查以下更新的代码段：

form {
  margin-top: 10%;
  margin-left: 30%;
}

input,
span,
label {
  font-family: monospace;
}

input:focus {
  outline: 0;
}


/* MAIN EFFECT */
/* FOR USERNAME */

.user-input, .pass-input {
  font-size: 25px;       /* font size when typing */
  font-weight: 300;
  border-radius: 3px;
  margin: 0;
  border: none;
  width: 18%;            /* input border width */
  background: transparent;
  /*overflow-x: hidden; /* Hack to make "rows" attribute apply in Firefox. */
}

/* while not focus */
.user-input + .user-label, .pass-input + .pass-label {
  display: block;
  position: relative;
  top: -30px;
  width: 18%;                     /*width while not focus */ 
  border-bottom: 2px solid black; /* BOTTOM border & color */
  height: 30px;                   /* input border height */
  transition: width 3s ease;      /* line width transition */
  z-index: 1;
}

.user-label > span, .pass-label > span {
  position: absolute;    /* label position in front of input */
  color: black;          /* font color while not focus */
  font-size: 20px;       /* font size while not focus */
  top: 0px;              /* label position while not focus */
  left: 0px;
  z-index: -1;
  transition: top 0.2s ease, font-size 0.2s ease, color 0.2s ease; /* transition to go back */
}

/* lABEL while on top (focus)*/
.user-input:focus + .user-label > span, .user-input:valid + .user-label > span,
.pass-input:focus + .pass-label > span, .pass-input:valid + .pass-label > span
{
  top: -20px; 
  font-size: 15px;
  color: blue;           /* font color while on top */
}


.user-input:focus {
  background: yellow;
}
 
.pass-input:focus {
  background: green;
}

<form>

   <div class="uname">	
      <input type="text" class="user-input" id="nme" required autocomplete="off" />
      <label class="user-label" for="nme"><span>Username</span></label>
   </div>

   <div class="pword"> 
      <input type="text" class="pass-input" id="pass" required autocomplete="off" />
      <label class="pass-label" for="pass"><span>Password</span></label>
   </div>   
  

  
</form>

我正在尝试为密码创建相同的效果，但是无法正常工作

3 个答案: