[SOLVED] Styling ion-input placeholder text color


#1

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-list>
                <ion-item>
                    <ion-input type="text" placeholder="The placeholder text color I want to display in another color than the default one"></ion-input>
                </ion-item>
            </ion-list>
        </ion-col>
    </ion-row>

#2

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

#3

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


#4

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


#5

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>
</ion-item>

#6

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


#7

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”


#8

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