web-dev-qa-db-ja.com

Ionic 2プレースホルダーテキストスタイル

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>

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

具体的には、プレースホルダーテキストのスタイルを変更する必要があり、アクティブな場合は下枠を変更します。 APIとSASS変数オーバーライドを提供することで、境界線の継承スタイルと入力フィールドのプレースホルダーテキストをオーバーライドする方法を理解できませんでした。

各入力がオンになっている特定のページに影響を与えるこれらの変更に加えて、「！important」の使用を避けたい（変更を「グローバル」にしたくない）。

htmlcssangularionic-frameworkionic2
6
Pezetter

Ionic2 RC4では、app.scssファイルに次の行を追加する必要があります。

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

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

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

::プレースホルダーセレクターを実行するだけです。

<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
    }
  }
}
9
Marko

Ionic 2は sass変数のオーバーライド を提供しており、スタイルを簡単に変更できます。

theme/variables.scss

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

これは私のために働きます：D

ionic cli 4.1.1

example.scss

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

example.html

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

Ionic 4 from docs custom-properties の場合。

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

*.scss

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

Ionic2.0の場合、ファイルapp.ms.css内で、行番号6069の周りで。text-input ::-moz-placeholderをスタイリングしてみましたが、うまくいきました。同じことをRC0でも試すことができます

0
Praful vats

誰かが助けを必要とする場合：

ion-input {
            color: #000000ad !important;
            font-size: 16pt;
            --placeholder-color: black !important;
            --placeholder-opacity: 100%;
          }

不透明度の値は、入力テキストのように見えます。

0
Fay007