代码之家 › 专栏 › 技术社区 › Aashiq Rathnadas

材料类型CSS输入标签重叠自动填充,直到动作-角度2才激活

material-design input angular css html

Aashiq Rathnadas · 技术社区 · 6 年前

下面的代码

.login box.group position:relative;margin bottom:15px;
.登录框输入:焦点轮廓:无;框阴影:无;
.登录框输入:focus~label,输入:not(:placeholder shown)~label,输入:valid~label top:-5px;字体大小:13px;颜色:646464;字体粗细:300;左:3px
.登录框.栏:前左:50%;
.登录框输入:focus~.bar:before,输入:focus~.bar:after width:50%;
角度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>




.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;}

1 回复 | 直到 6 年前

Aashiq Rathnadas 6 年前

完成了

.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}

解决了它