ionic 4 change ion label color when focused within ion item


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.

Following code I have used

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

  <ion-grid style="margin-top: 10vh;">
      <ion-col size="12">
          <ion-label class="loginLabel" position="floating">Mobile No.</ion-label>
          <ion-input type="number"></ion-input>
          <ion-label class="loginLabel" position="floating">Password</ion-label>
          <ion-input type="password"></ion-input>
  <ion-grid class="ion-padding">
      <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>
  <p class="registerText">New Here? SIGN UP!</p>

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 {
        -webkit-transform: rotate(0deg);
        -webkit-transform: rotate(360deg);


add this in your page.scss

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

Answered By – parrycima

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published