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

【问题标题】：Material type css input label overlapping auto fill, not activating until an action - Angular 2材质类型 css 输入标签重叠自动填充，直到动作才激活 - Angular 2
【发布时间】：2018-11-27 23:36:28
【问题描述】：

我使用的是材质风格的 input ，但是当有一个自动填充它的重叠值时，尝试了不同的方式，比如 input:valid ， input:enabled 等。有没有办法完成它，开发在 角度 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;}

【问题讨论】：

标签： html css angular input material-design

【解决方案1】：

完成了 input:-webkit-autofill:focus ~ label 就我而言将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}

解决了

【讨论】：

它处理了自动填充的电子邮件和标签的重叠，但如果没有电子邮件，则标签保持在顶部，但它应该回到输入中