Ionic 4: Style input placeholder

Question

I'm trying to style the placeholder of my Ionic 4 application.The HTML looks as follows:

<form>
  <ion-grid>
    <ion-row class='label'>Name</ion-row>
    <ion-row>
      <ion-item>
        <ion-input type='text' [(ngModel)]='recipe.name' name='name' placeholder='Name'></ion-input>
      </ion-item>
    </ion-row>
    <ion-row class='label'>Weight</ion-row>
    <ion-row>
      <ion-item>
        <ion-input type='number' [(ngModel)]='recipe.weight' name='weight' placeholder='Weight'></ion-input>
        <ion-label>kg</ion-label>
      </ion-item>
    </ion-row>
  </ion-grid>
</form>

If tried out Ionic 2.x solutions yet it did not work out.

I've figured out that if you set a color in ion-item it styles the entire text of the input field

ion-item {
    ion-input{
        color:red;
    }
}

when using the pseudo class :placeholder-shown or the pseudo element ::placeholder on ion-input though the styling shows no effect.

What am I doing wrong? Is there even a possibility in Ionic 4 to style input placeholder ?

Edit:

Stackblitz to fork with Ionic 4 and Angular 6

score 22 · Accepted Answer · edited Aug 21 '18 at 11:14

22

Use this style code:

ion-input{
    --placeholder-color: red;
    --placeholder-opacity: 1;
}

See here:https://stackblitz.com/edit/angular6-with-ionic4-list-refresh-test-yq3ntj?file=src%2Fapp%2Fapp.component.html

edited Aug 21 '18 at 11:14

Torjescu Sergiu

1,483
10
24

answered Aug 21 '18 at 11:05

לבני מלכה

15,925
2
23
47

tell me for more help ::) – לבני מלכה Aug 21 '18 at 11:05
you can remove important from your example and it still works – Torjescu Sergiu Aug 21 '18 at 11:12
happy to help :) (I found solution by see in F12) – לבני מלכה Aug 21 '18 at 11:35

score 1 · Answer 2 · answered Aug 21 '18 at 08:15

1

Please try this general styling to see if it has any effect:

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

answered Aug 21 '18 at 08:15

Torjescu Sergiu

1,483
10
24

It showed no effect. Still black text and grey-ish placeholder – MirJo Aug 21 '18 at 08:17
can you try using !important on the example shown above, just for testing purposes/ – Torjescu Sergiu Aug 21 '18 at 08:19
2

It works perfect use `!important`:https://stackblitz.com/edit/ionic-x8d8vy?file=pages/home/home.html – לבני מלכה Aug 21 '18 at 08:22
Yes, but if you use it like that it will affect the entire website, if you want something more specific, you can target the desired class and put at the end the pseudo elements. Cheers! – Torjescu Sergiu Aug 21 '18 at 08:27
I added an _!important_ behind every red. Yet still no success – MirJo Aug 21 '18 at 08:29
can you provide us the css code behind your project, or even better, a codepen or jsfiddle to see exactly what is going on there. The html alone is not helping us very much – Torjescu Sergiu Aug 21 '18 at 08:31
@לבנימלכה the problem is, that your stackblitz is ionic 3 while my project is running on ionic 4 – MirJo Aug 21 '18 at 08:47
Yes I know I can not find stackblitz with version 4 but I think it the same – לבני מלכה Aug 21 '18 at 08:47
@TorjescuSergiu there is no futher css in the procet except the default import of ~@ionic imports in the gobal.scss – MirJo Aug 21 '18 at 08:48
@לבנימלכה if added a stackblitz to the bottom of my question – MirJo Aug 21 '18 at 08:51
@MirJo I copied code to stackblitz and it does not work:https://stackblitz.com/edit/angular6-with-ionic4-list-refresh-test-yq3ntj?file=src/app/app.component.html – לבני מלכה Aug 21 '18 at 08:57
the on top and bottom needs to be removed, then it works – MirJo Aug 21 '18 at 09:01
I cannot find the form provided in the question in the stackblitz example – Torjescu Sergiu Aug 21 '18 at 09:47
@MirJo see my answer – לבני מלכה Aug 21 '18 at 11:06

score 1 · Answer 3 · answered Oct 29 '20 at 21:26

Some components, like datetime, use your own html structure. So I has apply more tags to changed all inputs.

ion-datetime {
  --placeholder-color: rgba(211, 211, 211, 0.4);
}

ion-input, ion-textarea, ion-select {
  --placeholder-color: rgba(211, 211, 211, 1);
}

I don't understand why I use different alpha values... but it worked!

Ionic 4: Style input placeholder

3 Answers3