基本的な機能の参考サイトはありますが、細かい修正になると見つけられない。あっても英語な事が多いので、備忘録がてら書きます。

〇今日の内容

1.Placeholderのfloatをなくしたい
2.Placeholderのフォントカラーを変えたい
3.Focusされた時のフォントカラーを変えたい
4.ついでに、Underlineを消したい

〇修正前、、、、

・Placeholderのデフォルトカラーが暗くてみづらい(左側にいる「荷主」です)
・FocusをあてるとPlaceholderがmd-cardをはみ出しカッコ悪い
・そしてInputの縁とUnderlineが両方あって、更にカッコ悪い

1.Placeholderのfloatをなくしたい

htmlにfloatPlaceholder="never"を加えるだけでした。

<md-input-container class="sample"  floatPlaceholder="never">
 <input class="sample2" mdInput placeholder="荷主">
</md-input-container>

floatされなくなりました。
代わりにinputの中に残るようになりました。

ちなみに、floatPlaceholder="never"は他にも、"auto"と"always"がいて、全3パターンです。

autoは修正前の仕様と同じ、focusするとfloatします。
"always"は常にfloat状態になります。

2.Placeholderのフォントカラーを変えたい

CSSで頭に、::ng-deepと付けると修正できます。

::ng-deep .mat-input-placeholder{
  color: #fff;
}

3.Focusされた時のフォントカラーを変えたい

CSSで頭に::ng-deep、更に.mat-focusedを加えます。

::ng-deep .mat-focused .mat-input-placeholder {
  color: #fff;
} 

4.ついでに、Underlineを消したい

2.3と同じく::ng-deepで消せました。

::ng-deep .mat-input-underline {
  display: none;
}

(Before)

(After)

〇感想

見た目は機能と違って、修正しても現場のパートさんが「見やすくなった！」って喜ぶくらいなので(もちろん重要なことです！！)、現場の作業効率を変えるわけではないので、、、、、

こういうところで時間をとられたくないですね、お役に立てたら嬉しいです。