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

Question

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?

Answer 1

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 ;
}

Answer 2

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

Answer 3

Just giving out a somewhat simpler solution for the problem.
When you have multiple rules setting a property, i.e color: red;, CSS will apply that one that has more "priority". None of the selectors will have more priority than the keyword !important.
ion-label {
color: your-awesome-color-here !important;
}