ion-input with floating label placeholder colour is not changing in ionic

Issue

I want to change the placeholder colour of ion-input but i'm unable to change the placeholder colour. I have ion-input with floating label. here is my workaround...

<ion-item>
    <ion-label floating>first Name</ion-label>
    <ion-input type="text"></ion-input>
</ion-item>

what i have tried and not working...

1) $text-input-placeholder-color

2)

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: pink;
}
::-moz-placeholder { /* Firefox 19+ */
  color: pink;
}
:-ms-input-placeholder { /* IE 10+ */
  color: pink;
}
:-moz-placeholder { /* Firefox 18- */
  color: pink;
}

3)

::placeholder {
  color: blue;
  font-size: 1.5em;
}

but nothing is working. can anyone help me to solve this?

Solution

That is not a placeholder. It is still a ion-label

To change the style of a floating ion-label,

Add this to your variable.scss

$label-ios-text-color: blue;
$label-md-text-color: blue;
$label-ios-text-color-focused: blue;
$label-md-text-color-focused: blue;

or edit your .scss

.label[floating],
.label[stacked],
.input-has-focus .label[floating] {
    color: blue ;
}

Answered By - Mystery