材质类型css输入标签重叠自动填充，直到动作才激活 - Angular 2

Question

我使用的是材料样式输入，但是当有自动填充时，它会重叠其中的值，尝试不同的方式，如输入：有效，输入：启用等等有没有办法完成它，发展是在角度2

下面的代码

 <form  ngNativeValidate class="pop-form" (submit)="signIn()" >
    <div class="group">
      <input type="text" name="user" [(ngModel)]="credentials.email" class="form-control" placeholder="&nbsp;" required="">
      <span class="highlight"></span>
      <span class="bar"></span>
      <label >E-mail</label>
  </div>

  <div class="group">
    <input type="password" name="password" [(ngModel)]="credentials.password" class="form-control" placeholder="&nbsp;" required="" >
    <span class="highlight"></span>
    <span class="bar"></span>
    <label >Password</label>
</div>

      <div [class.loader]="signingIn" ></div>
    <button type="submit" name="login" class="bt-login">LOG IN</button>
    <button class="bt-login clickable" (click)="register()" >CHECK IN</button>
</form>

Css

.login-box .group {position:relative; margin-bottom:15px;}
.login-box input{font-size:18px;padding:15px 10px 10px 5px;display:block;width:100%;border:none;border-bottom:1px solid #CCCCCC; box-shadow: none;border-radius: 0;height: 48px;}
.login-box input:focus{ outline:none; box-shadow: none;}
.login-box input[type="checkbox"]{display: inline-block;}
.login-box label{color: #646464;font-size: 20px;font-weight: 600;position:absolute;pointer-events:none;left:10px;top:10px;transition:0.2s ease all; -moz-transition:0.2s ease all; -webkit-transition:0.2s ease all;}
.login-box input:focus ~ label, input:not(:placeholder-shown) ~ label , input:valid ~ label{top:-5px;font-size:13px;color:#646464;font-weight: 300;left:3px}
.login-box .bar{ position:relative; display:block; width:100%; }
.login-box .bar:before, .bar:after{content:'';height:2px;width:0;bottom:0px;position:absolute;background:#646464;transition:0.45s ease all;-moz-transition:0.45s ease all;-webkit-transition:0.45s ease all;z-index: 999;}
.login-box .bar:before {left:50%;}
.login-box .bar:after {right:50%; }
.login-box input:focus ~ .bar:before, input:focus ~ .bar:after {width:50%;}
.login-box input:focus ~ .highlight {-webkit-animation:inputHighlighter 0.45s ease;-moz-animation:inputHighlighter 0.45s ease;animation:inputHighlighter 0.45s ease;}

Answer 1

用 在我的情况下 input：-webkit-autofill：focus〜标签 将CSS更改为

.login-box input:focus ~ label, input:not(:placeholder-shown) ~ label , input:valid ~ label, input:-webkit-autofill:focus ~ label{top:-5px;font-size:13px;color:#646464;font-weight: 300;left:3px}

解决了