CODEWITHSUNDEEP
htmlcssangularinputmaterial-design
Aashiq Rathnadas
Aashiq Rathnadas

Reputation: 525

Material type css input label overlapping auto fill, not activating until an action - Angular 2

I'm using a material style input , but when there is an auto fill its overlapping the values in it, tried different ways like input:valid , input:enabled etc. is there any way to get it done, the development is in angular 2

code below

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

enter image description here

Upvotes: 1

Views: 2268

Answers (1)

Aashiq Rathnadas
Aashiq Rathnadas

Reputation: 525

Done it with input:-webkit-autofill:focus ~ label in my case changing the css to

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

solved it

Upvotes: 2

Related Questions