How to adjust floating labels

Ionic Framework ionic-v3
1

I want to adjust floating labels and also change the color floating labels underline color how can i do that

item
item.JPG1082×222 6.59 KB

above my result password section taking extra underline length how can i reduce
please help me anyone
Thanks

2

Hi, @flycoders_sourav

Try below code

<ion-list>
  <ion-item>
	<ion-label floating  ><ion-icon name="mail"></ion-icon>	Username</ion-label>
	<ion-input [(ngModel)]="login.username" name="username" type="text" #username="ngModel" spellcheck="false" autocapitalize="off" required></ion-input>
  </ion-item>
  <p ion-text [hidden]="username.valid || submitted == false" color="danger" padding-left>Username is required</p>
  <ion-item>
    <ion-label floating  ><ion-icon name="lock"></ion-icon> Password</ion-label>
    <ion-input [(ngModel)]="login.password" name="password" type="password" #password="ngModel" required></ion-input>
  </ion-item>
  <p ion-text [hidden]="password.valid || submitted == false" color="danger" padding-left>Password is required</p>
</ion-list>

Thanks