ionic 4 change ion label color when focused within ion item

2
votes

I want to change ion-label color inside an ion-item with ion-input when focused.

img 1

I am able to change the highlight color of ion-item using --highlight-color-focused: yellow; but unable to change the label color.

img 2

It is showing default color of label as primary but I want to change it as 'warning' or if required any custom color.

I've tried the following solution which is mentioned in Ionic github repository for same problem but didn't get my problem solved.

https://github.com/ionic-team/ionic/issues/18531

Following code I have used

login.page.html

<ion-content>
  <div class="logo">
    <div class="logoCenter">
      <ion-icon name="sync"></ion-icon>
    </div>
    <h1 style="font-family: ProximaBold; color: white">Sample Application</h1>
  </div>

  <ion-grid style="margin-top: 10vh;">
    <ion-row>
      <ion-col size="12">
        <ion-item>
          <ion-label class="loginLabel" position="floating">Mobile No.</ion-label>
          <ion-input type="number"></ion-input>
        </ion-item>
        <ion-item>
          <ion-label class="loginLabel" position="floating">Password</ion-label>
          <ion-input type="password"></ion-input>
        </ion-item>
      </ion-col>
    </ion-row>
  </ion-grid>
  <ion-grid class="ion-padding">
    <ion-row>
      <ion-col class="ion-text-center" size="12">
        <ion-button expand="full" shape="round" [routerLink]="['/home']">Submit</ion-button>
        <p style="color: white;">Forgot Password?</p>
      </ion-col>
    </ion-row>
  </ion-grid>
  <p class="registerText">New Here? SIGN UP!</p>
</ion-content>

login.page.scss

ion-content {
    --background: linear-gradient(180deg, #2ecc71, #289c59, #1a743f);

    .logo {
        margin-top: 20%;
        text-align: center;
    }

    .logoCenter {
        margin: 0 auto;
        height: 150px;
        width: 150px;
        border-radius: 50%;
        background: linear-gradient(290deg, #31da79, #29b866);
        box-shadow:  20px 20px 60px #27ad60, -20px -20px 60px #35eb82;
        display: flex;
        justify-content: center;
        align-items: center;

        ion-icon {
            zoom: 4;
            color: white;
            animation: rotating 2s linear infinite;
        }
    }

    ion-item {
        --background: transparent;
        --border-color: white;
        --color: white;
        --highlight-color-focused: yellow;
    }

    ion-button {
        --background: white;
        --color: green;
    }

    .registerText {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translate(-50%, 0);
        color: white;
        font-size: larger;
    }
}

@keyframes rotating {
    from{
        -webkit-transform: rotate(0deg);
    }
    to{
        -webkit-transform: rotate(360deg);
    }
}
3
ionic-frameworksassionic4
Put the code of the item so i can tell you what to do. - Mostafa Harb
I've updated my post. Please check it once. - Yash Jain
Where is the class for loginLabel. Please also add it... - Mostafa Harb
ignore that, I didn't use that class. Just mentioned. - Yash Jain
Okay inside the ion-item{.loginLabel{color:yellow}} if you make like it will not take the color? - Mostafa Harb

3 Answers

7
votes

add this in your page.scss

ion-item.item-has-focus > ion-label{
  color: red !important;
}
0
votes

ion-item

But because of material encapsulation "--color-activated" wont work properly. The easiest way is to target ion-label directly with !important. This is my default ion-item "scss" file.

.ion-item{
    --ripple-color: transparent;
    &.item-has-focus ion-label {
        color: gray !important;
    }
    ion-input {
        --padding-bottom: 0 !important;
        --padding-top: 0 !important;
    }
}
-2
votes

Just add !important to your color it will stay focus on which color you have added

ion-label {
    color: #fff !important;
}