Changing ionic float input color

Ionic Framework ionic-v3
1

I need to change the color for my ion-input and ion-label (from default black to white). I`m doing something like this:

<ion-item style="color:#ffffff">
  <ion-label floating style="color:#ffffff">Password</ion-label>
  <ion-input [(ngModel)]="user.password" name="password" type="password" #password="ngModel" required >
  </ion-input>
</ion-item>

Tha label color changes,but the bottom line of the input dosen’t. Looking at the ionic docs, I didn’t found something specific for this. Can someone help me?

1 Like
2

Hello, you can find the solution from the developer tools of the browser.
in iOS:

.item-ios{
        color: black; //floating input label color
    }

in android:

.item-input-has-focus .label-md[floating], .input-has-focus .label-md[floating]{
        color: black; //label color when focusing
}
.item-input .label-md{
        color: black; //label color
}
1 Like
3

but textbox underline color not change. how to change ?please help me any one

4

Do you mean input underline?
if yes, please try:

.item-md.item-input .item-inner {
        border-bottom-color: black !important;
    }
1 Like
5

Thank you so much for your effort.its work fine for me