输入字段的滑动底部边框不起作用

因为你不能在像input这样的单标签元素上使用伪元素，你可以在label中包装input，并使用span作为边界…和动画width而不是scale。

label {
  display: inline-block;
  width: 83%;
  overflow: hidden;
}
.fields {
  color: #646c70;
  border: none;
  outline: none;
  padding: 10px;
  width: 100%;
}
.fields + span {
  display: block;
  border-bottom: solid 3px #019fb6;
  width: 0;
  -webkit-transition: width 250ms ease-in-out;
  transition: width 250ms ease-in-out;
}
.fields:focus + span {
  width: 110%;          /*  used calc first, but won't work on Edge  */
  -webkit-transition: width 250ms ease-in-out;
  transition: width 250ms ease-in-out;
}

<label>
  <input class="fields" id="password" type="password" placeholder="Password">
  <span></span>
</label>