Question

当我散焦时，会有一点宝蓝色背景appearing（在border-bottom: 2px solid white;和::after element之间）。

我不知道为什么会这样。

body {
  background-color: royalblue;/*#f0f0f0;*/
}


label {
  font-family: 'Montserrat', sans-serif; 
  font-size: 14px;
  z-index: -1;
  border: 0; 
  color: white;
  position: relative;
}

.head {
  color: white;
  margin-left: 44%;
  font-family: monospace;
  font-size: 25px;
}

/*.content {
  margin-top: 10%;
  margin-left: 41%;
}*/

.password {
  margin-top: 8%;
}
form {
position: relative;

}


input {
  position: absolute;
  font-family: 'Montserrat', sans-serif; 
  font-size: 15px;
  background: transparent;
  border: 0;                      /* BORDER yes/no */
  border-bottom: 2px solid white; 
  background: transparent;
  outline: 0;
  height: 25px;
  width: 180px;
  z-index: 1;
  margin-top: 5px;
} 

/*input:focus {
  outline: 1;
}*/

label::after {
  content: '';
  position: absolute;
  top: -2px;
  left: 0;
  width: 180px;
  height: 25px;
  border-radius: 2px;
  transition: transform .3s;
}


label::after{
  z-index: -1;
  background: beige; /*#a86bf;*/   
  transform: scale3d(1, 0, 1);
  transform-origin: 0% 0%;
}


input:focus {

  border-radius: 1px;
}


input:focus + label::after,
input:valid + label::after {
  transform: scale3d(1, -1, 1);
  transition-timing-function: linear;
}


span {
  position: relative;
  margin-top: -30px;
  display: block;
  padding: .6em 0;
  padding-left: -5px;
  transition: top .5s ease, font-size .5s ease; 
 /* transition: transform 1s 2s;*/
  top: 0;
}

input:focus + label > span,
input:valid + label > span {
  top: -20px;
  font-size: 11px;
  padding-bottom: 15px; 
}




/* font-family: monospace;*/
 /*transform: translate3d(0, -80%, 0); */
 /* transition-timing-function: linear;*/

<!DOCTYPE html>
<html>
<head>
   <link rel="stylesheet" type="text/css" href="style.css">
   <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
  <title>Test</title>
</head>
<body>

 <p class="head">Sign In</p>
<form>

    <div class="content"> 
     
      <div class="username">
         <input type="text" name="name" class="user-input" id="user" required /> <!--input field-->
         <label class="user-label" for="user"><span>Username</span></label>
      </div>

     <div class="password">
         <input type="text" name="name" class="pass-input" id="pass" required />  <!-- input field -->
         <label class="pass-label" for="pass"><span>Password</span></label>
     </div>  

    </div>
  
</form>

</body>
</html>

更新：

我更改为top: 1px;，也将border-bottom更改为黑色，现在是 this （full code）。为什么底部会有一些多余的规模？如何删除那些？

Answer 1

您在标签上有一个top：-2px，问题是当您模糊时，所以一个解决方案是将top：-2px移到input：focus + label :: after和input：focus + label :: after，所以如果没有重点关注或没有验证，您就不会有差距

body {
  background-color: royalblue;/*#f0f0f0;*/
}


label {
  font-family: 'Montserrat', sans-serif; 
  font-size: 14px;
  z-index: -1;
  border: 0; 
  color: white;
  position: relative;
}

.head {
  color: white;
  margin-left: 44%;
  font-family: monospace;
  font-size: 25px;
}

/*.content {
  margin-top: 10%;
  margin-left: 41%;
}*/

.password {
  margin-top: 8%;
}
form {
position: relative;

}


input {
  position: absolute;
  font-family: 'Montserrat', sans-serif; 
  font-size: 15px;
  background: transparent;
  border: 0;                      /* BORDER yes/no */
  border-bottom: 2px solid white; 
  background: transparent;
  outline: 0;
  height: 25px;
  width: 180px;
  z-index: 1;
  margin-top: 5px;
} 

/*input:focus {
  outline: 1;
}*/

label::after {
  content: '';
  position: absolute;
  left: 0;
  width: 180px;
  height: 25px;
  border-radius: 2px;
  transition: transform .3s;
}


label::after{
  z-index: -1;
  background: beige; /*#a86bf;*/   
  transform: scale3d(1, 0, 1);
  transform-origin: 0% 0%;
}


input:focus {

  border-radius: 1px;
}

input:focus + label,
input:valid + label {
  top: -2px;
}

input:focus + label::after,
input:valid + label::after {
  transform: scale3d(1, -1, 1);
  transition-timing-function: linear;
}


span {
  position: relative;
  margin-top: -30px;
  display: block;
  padding: .6em 0;
  padding-left: -5px;
  transition: top .5s ease, font-size .5s ease; 
  top: 0;
}

input:focus + label > span,
input:valid + label > span {
  top: -20px;
  font-size: 11px;
  padding-bottom: 15px; 
}




/* font-family: monospace;*/
 /*transform: translate3d(0, -80%, 0); */
 /* transition-timing-function: linear;*/

<!DOCTYPE html>
<html>
<head>
   <link rel="stylesheet" type="text/css" href="style.css">
   <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
  <title>Test</title>
</head>
<body>

 <p class="head">Sign In</p>
<form>

    <div class="content"> 
     
      <div class="username">
         <input type="text" name="name" class="user-input" id="user" required /> <!--input field-->
         <label class="user-label" for="user"><span>Username</span></label>
      </div>

     <div class="password">
         <input type="text" name="name" class="pass-input" id="pass" required />  <!-- input field -->
         <label class="pass-label" for="pass"><span>Password</span></label>
     </div>  

    </div>
  
</form>

</body>
</html>

Answer 2

在标签：:之后上添加 top：1px 。请参见下文。

label::after {
    content: '';
    position: absolute;
    left: 0;
    top: 1px;
    width: 180px;
    height: 25px;
    border-radius: 2px;
    transition: transform .3s;
}

为什么底部会有一些多余的规模？如何删除这些内容？

2 个答案: