Ionic 2 placeholder text styling

Question

I am working on an application using Ionic 2 rc0 and have several input fields throughout the application that still need styling.

<ion-item class="su-p3-item">
  <ion-label floating class="su-input">Your name</ion-label>
  <ion-input type="text" class="su-input"></ion-input>
</ion-item>

ionic 2 input api http://ionicframework.com/docs/v2/api/components/input/Input/

Specifically, I need to change the styling of the placeholder text, and bottom-border when active. Through the API, and provided SASS variable overrides, i could not figure out how to override the inherited styles for borders and placeholder text for input fields.

I would like to avoid using '!important' in addition to these changes on affecting the specific page each input is on (I dont want the changes to be 'global').

Answer 1

With Ionic2 RC4, you have to add the following line in your app.scss file:

.text-input::-moz-placeholder {
  color: white;
}

.text-input:-ms-input-placeholder {
  color: white;
}

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

Answer 2

Just do the ::placeholder selector, i.e.

<ion-input placeholder="enter placeholder here..." class="custom-input" type="text"></ion-input>

and in css just call it like

ion-input {
  &.custom-input {
    font-size: 20px; //sets text font size
    ::placeholder {
      font-size: 12px; //sets placeholder font size
    }
  }
}