Ionic 2プレースホルダーのテキストスタイリング

Question

私はIonic 2 rc0を使用してアプリケーションを開発しており、スタイリングが必要なアプリケーション全体にいくつかの入力フィールドがあります。

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

イオン2入力API http://ionicframework.com/docs/v2/api/components/input/Input/

具体的には、私がアクティブのときプレースホルダテキストのスタイル、および底部ボーダーを変更する必要があります。 APIを通して、SASS変数のオーバーライドを提供すると、入力フィールドの枠線とプレースホルダテキストの継承されたスタイルをオーバーライドする方法がわかりませんでした。

これらの変更に加えて、「重要！」を使用しないで、各入力が有効になっている特定のページに影響を与えないようにしたいと思います。

Answer 1

のために試すことができ、あなたのapp.scssファイルに次の行を追加する必要があります：あなたは簡単にスタイルを変更するために使用することができますsass variable overrides

.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

Ionic2.0の場合は、ファイルapp.ms.cssの中で、.text-input :: - moz-placeholderの行番号6069をスタイリングしようとしました。同じことがIonic2 RC4でRC0

Answer 3

イオン2が用意されています。

テーマ/ variables.scss

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

Answer 4

ただすなわち

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

とCSSでだけで、それが仕事をし

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