CODEWITHSUNDEEP
angularionic-frameworksassionic6ionic7
hugocantito
hugocantito

Reputation: 31

How to change the color of a label of an ion-input in ionic 7

I have upgraded my project to Ionic 7 and now ion-inputs don't need an ion-label. I have changed it but I don't know how to assign the color they had.

Before:

enter image description here

enter image description here

After: enter image description here

enter image description here

I can't find anything related in the documentation. Can someone help me?? 😢

Upvotes: 2

Views: 3079

Answers (3)

Wilt
Wilt

Reputation: 44345

Two other options without the deprecated ::ng-deep selector:

a) Use class names and add a global stylesheet with colors:

/* should be in a global stylesheet i.e. styles.css */
ion-input.red label .label-text {
  color: 'red';
}

Use in your my.component.html like this:

<ion-input labelPlacement="fixed" class="red"></ion-input>

b) Use the --color variable in your component stylesheet:

This option is also mentioned here in the Ionic documentation.

You can set the --color variable inside your component stylesheet to the desired color.

/* my.component.css */
:host ion-input {
  // change the text label for all ion-input elements inside this component to red.
  --color: red
}

Or wrap it in an additional class in case you want to have several options:

/* my.component.css */
:host ion-input.red {
  // change the text label for ion-input elements with classname red inside this component to red.
  --color: red
}

Use in your my.component.html like this:

<ion-input labelPlacement="fixed" class="red"></ion-input>

Upvotes: 0

Ravi Ashara
Ravi Ashara

Reputation: 1196

    <ion-item>
        <ion-input labelPlacement="stacked" value="[email protected]">
          <div slot="label"> <ion-text color="danger"> Email (Required)</ion-text></div>
        </ion-input>
   </ion-item>

Upvotes: 0

Levy4u
Levy4u

Reputation: 91

Took a little bit of trial and error but this is what I have found to change the label part of ion-input in ionic7:

css:

::ng-deep ion-input .label-text{
    color: orange;
}

Upvotes: 5

Related Questions