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

回答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;
}

回答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
    }
  }
}

回答3:

Ionic 2 provides sass variable overrides you can use to easily change the style.

theme/variables.scss

$text-input-placeholder-color:(#000);

回答4:

This works for me :D

ionic cli 4.1.1

example.scss

ion-input {
    ::placeholder{
        color:white !important;
    }
}

example.html

<ion-input placeholder="Username" type="text"></ion-input>

回答5:

For Ionic2.0 , inside file app.ms.css I tried to do styling over .text-input::-moz-placeholder around line number 6069 and it worked. Same can be tried for RC0

回答6:

For Ionic 4 from docs custom-properties.

<ion-input class="custom-class"></ion-input>

*.scss

ion-input {
    &.custom-class {
        --placeholder-color: #fff;
    }
}