Search code examples
htmlcssangularionic-frameworkionic2

Ionic 2 placeholder text styling

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').

Solution

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