[SOLVED] Styling ion-input placeholder text color

What’s the best way to style the text color of a placeholder in a ion-put of Ionic2.

Is there a Sass variable for that purpose or should I do it with css code?

If you’ve got an example by your side, I would be happy to see it, thx in advance

<ion-row padding-top>
        <ion-col width-100>
                    <ion-input type="text" placeholder="The placeholder text color I want to display in another color than the default one"></ion-input>

Right now I solved it like following (using Bourbon). If someone knows a better way to do it, I would be glad to hear it :wink:

input {
    @include placeholder {
       color: $my-grey-blue;

@reedrichards, can you please provide example of html code where you use it? I tried and it didn’t work for me. Thanks.

@skydive what do you mean? I used the code above in this post

For RC put styling in selector:

page-login .placeholder-text{
color: color($colors, white);
font-size: 1.2em;

And in the template file:

<ion-item class="background">
    <ion-label fixed color="white">E-mail: </ion-label>
    <ion-input type="email" value="" class="placeholder-text"[formControl]="myForm.controls['email']"></ion-input>

This worked for me (stack overflow link)
ionic version: 3.6.0
node version: 6.11.1
npm version: 3.10.10

I added the more up-to-date answer on the stackoverflow. Same link. https://stackoverflow.com/questions/42249363/how-can-i-change-placeholders-color-in-ion-input/47217829#47217829

Just saving a click, here is the copy.

Current ionic (ionic-angular 3.8.0) offers the standard way of doing it via theme viariables.
See ionic documentation for the input field page, SASS variables section. Notice $text-input-placeholder-color variable.

This is not just the correct answer, it is exactly with the author asks for - “is there a variable…” The answer used to be “No, but here is the workaround”. Now it is “Yes, and it is official and documented”

$text-input-placeholder-color: map-get($colors, light); in variable.scss

Getting this error,

Module build failed (from ./node_modules/sass-loader/lib/loader.js):
[ng] @include placeholder {
[ng] ^
[ng] Undefined mixin.
[ng] ╷
[ng] 42 │ ┌ @include placeholder {
[ng] 43 │ │ color: #2567b1;
[ng] 44 │ └ }
[ng] ╵
[ng] stdin 42:5 root stylesheet