Ion-list input placeholder color

Am looking to change the placeholder text color in an input field inside an ion-item. I tried the following but it doesn’t seem to work.

<style>
 *::-webkit-input-placeholder {
    color:    blue;
  }
</style>

<ion-list>           
        <ion-item class="item-input">
            <span class="input-label">Address</span>
            <input type="text" placeholder="Current Location">
        </ion-item>
</ion-list>
input::-webkit-input-placeholder {
 color:    blue;

}

did the trick…

1 Like

I suggest rather using sass and override the _variables.scss with:
$input-color-placeholder: lighten($dark, 40%) !default;
to
$input-color-placeholder: lighten($positive, 40%) !default;
or something like that.

input::-moz-placeholder {
color: red;
}

input:-ms-input-placeholder {
color: red;
}

input::-webkit-input-placeholder {
text-indent: 0;
color: red;
}

This will also work.