Change color of floating label when focused


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:


Thanks a lot for you answer

Best regards


There are sass variables for material design and windows:


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


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?


I found the solution here:

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

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.

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

100% Working