Change color of floating label when focused

Hello,

I would like to know if there is a way to change the color of a floating label when it is focused.

I changed the color with my custom color (white) by putting color=“favorite” (my favorite is white for my project).
However when it is focused the color switch to primary and i would like to keep it white

Is there a way with a global variable like:

$text-input-highlight-color-invalid

Thanks a lot for you answer

Best regards

Geoffrey

There are sass variables for material design and windows:

$label-md-text-color-focused
$label-wp-text-color-focused

Not sure why iOs doesn’t have a variable. Check out the lable API docs for more.

2 Likes

thanks man it works perfectly. Hope it will work as well on IOS :slight_smile:

Did you get it to work on iOS? The following changes to these variables don’t seem to affect the iOS labels at all:
$label-ios-text-color, $label-ios-text-color-focused

These variables work globally, I.e. if you put them in variables.scss they will change the color on all application pages.

Is there a way to change focused ion-label locally, i.e. only on 1 particular page and not across the app?

Thanks.

I found the solution here:

https://forum.ionicframework.com/t/changing-ionic-float-input-color/75176/2

1 Like

If you’re using ionic 5 and want to get rid this nauseating on-focus color, just set ion-label color css with important flag

ion-label{
color:red !important;
}

Any way to change the color on ionic 5 only when the input is focused(the label is floating)?

[ Ionic V6 ]
If trying to Get Color on Label when its floating or any other interactive-position.
Try:

ion-item.item-has-focus > ion-label{
  color:  [yourColor]  !important;
}

100% Working

4 Likes