Ionique 2 texte de l'espace réservé style

Je suis en train de travailler sur une application à l'aide Ionique 2 rc0 et ont plusieurs champs de saisie dans l'application, qui doivent encore le style.

<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>

ionique 2 entrée de l'api http://ionicframework.com/docs/v2/api/components/input/Input/

Plus précisément, j'ai besoin de changer le style du texte de l'espace réservé, et le bas-frontière lorsqu'il est actif. Par le biais de l'API, et à condition SASS variable remplace, je ne pouvais pas comprendre comment remplacer les hérité de styles pour les bordures et les texte de l'espace réservé pour les champs de saisie.

Je voudrais éviter d'utiliser '!important "en plus de ces changements influant sur la page spécifique de chaque entrée est sur (je ne veux pas que les modifications apportées à être "global").

OriginalL'auteur Pezetter | 2016-10-17

  1. 24

    Avec Ionic2 RC4, vous devez ajouter la ligne suivante dans votre application.scss fichier:

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

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

.text-input::-webkit-input-placeholder {
  text-indent: 0;
  color: white;
}
    il fonctionne, dans mon cas, mon entrée est un ion-searchbar composante j'ai donc dû: .searchbar-md .searchbar-input::-webkit-input-placeholder { color: yellow }
    son travail pour moi,
    Merci. a fonctionné pour moi!!

    OriginalL'auteur Fr4NgUs

  2. 6

    Il suffit de faire ::espace réservé sélecteur, c'est à dire

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

    et en css viens de l'appeler comme 

    ion-input {
  &.custom-input {
    font-size: 20px; //sets text font size
    ::placeholder {
      font-size: 12px; //sets placeholder font size
    }
  }
}
    Bonne option pour la page spécifique de style par rapport à d'autres réponses

    OriginalL'auteur Marko

  3. 4

    Ionique 2 fournit sass variable remplace vous pouvez utiliser pour facilement changer le style.

    thème/les variables.scss

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

    OriginalL'auteur

  4. 2

    Cela fonctionne pour moi 😀 

    ionic cli 4.1.1

    exemple.scss

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

    example.html

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

    OriginalL'auteur user10018800

  5. 0

    Pour Ionic2.0 , à l'intérieur du fichier app.ms.css, j'ai essayé de faire style plus .texte d'entrée::-moz-espace réservé autour de la ligne numéro de 6069 et cela a fonctionné. Même peut être essayé pour RC0

    OriginalL'auteur Praful vats

  6. 0

    Pour Ionique 4 de docs personnalisé-propriétés.

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

    *.scss

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

    OriginalL'auteur Druta Ruslan