[SOLVED] Styling ion-input placeholder text color

Ionic Framework ionic-v3
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;
    }
}
2 Likes
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. ionic2 - How can I change placeholder's color in ion-input? - Stack Overflow

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

1 Like
9

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