时间戳

首页 > 解决方案 > 为什么底部有一些多余的水垢？如何删除那些？

html - 为什么底部有一些多余的水垢？如何删除那些？

问题描述

当我散开焦点时（在&之间）会出现一点皇家蓝背景。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改为黑色，现在这是结果（完整代码）。为什么底部有一些多余的水垢？如何删除那些？

标签： htmlcss

解决方案

你在标签上有一个顶部：-2px，你的问题是当你模糊时，所以一个解决方案是将顶部：-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>

推荐阅读