Label Text Color

Ionic Framework ionic-v3
1

How do I change the text color on a label to the color of disabled component text. For example, a button will display black text color when normal but if disabled, it will display light gray color. Thank you very much

1 Like
2

Just inspect the field in the browser, you will get the CSS property name. Copy and paste the title in your scss file. Make changes there. Simple.

3

it is always best practice to use ionic ways of doing things… rather than styling in css. at least where there is an ionic way of doing things!
so what you need to do is to use the color attribute for your label.

<ion-label color="your-color" floating>your text</ion-label>

and for color there are some pre-defined colors you can find and use in your project theme folder in variables.scss
which i have added the last three colors myself. feel free to add your own colors and use them for your ionic elements

$colors: (
  primary:    #488aff,
  secondary:  #32db64,
  danger:     #f53d3d,
  light:      #f4f4f4,
  dark:       #222,
  custom1:    #16A1A4,
  soft-pink:  #F58282,
  soft-grey:  #737373
);
1 Like
4

Thank you sir very much

1 Like
5

Do you know how to change the color of a label in a specific page in ionic 4?

6

in the .scss file for that page, add:

ion-label{
  color: #686868!important; //change to whatever colour you want here
}