角材の操作入力フォームスタイリング

Question

角度と角度のある材質（AM）を初めて使用しました。デフォルトでAM Input Componentは、フォームをクリックするまでprimaryのパレットの色を表示し、placeholderの値とマーカー行をaccentの色に変更します。アクセントの色が常に表示されるようにフォームを操作する方法はありますか？つまり、フォームは常に強調表示されます。私の原色は暗く、私のウェブサイトのページの背景も暗いので、フォームがユーザによってクリックされない限り、placeholderとマーカー行はほとんど見えません。これは私のサイトのページにも素晴らしい色の追加になります。ここで

はから必要なHTMLのサンプルです：

<md-input-container> 
    <input mdInput placeholder="Favorite food" value="Sushi"> 
</md-input-container> 

あなたはinput lineにcolor="accent"を追加することができますが、フォームがユーザによってクリックされたとき、再び、色のみ表示されます。

ありがとうございます。 角度材料成分から生成

Answer 1

として

.mat-input-wrapper { 
    background: gray; 
} 

以上ネストされた要素のクラスを参照するために、HTML生成を点検：全入力ラッパーの使用にスタイリングを設定するには

：

/deep/ .mat-input-underline { 
    background-color: #FF0000; /* replace this color with your accent color hex code */ 
} 

demo

Answer 2

すべてHTML要素は、それに割り当てられたクラスmat-cssクラスを取得します。彼らはスタイリングに使用することができます。

あなたが話している入力コンポーネントには、いくつかのネストされた要素があるため、スタイリングを適用する場所を決めなければなりません。 - あなたはあなたのコンポーネントのCSSファイルに以下を追加することができ、このようなmat-input-element

Answer 3

私はフォームフィールドの幅を調整して同様の問題を抱えていました。調査の結果、Nehalの回答を参照した回答が正しいことが判明しましたが、最新のバージョン5.0.0-rcXでは廃止されました。https://angular.io/guide/component-styles。私はCSSセレクタを二重チェックし続けましたが、ViewEncapsulationを変更する必要があることがわかりました。

mat-input-container { 
    // Your CSS here 
} 

そして、私のコンポーネントのTSファイルで：

@Component({ 
    selector: 'my-component-selector', 
    templateUrl: './my-component.component.html', 
    styleUrls: ['./my-component.component.scss'], 
    encapsulation: ViewEncapsulation.None 
}) 

変えずに（必要に応じて、もちろんあなた自身のセレクタを変更）私のCSS/SCSSファイルで私のためにして働いていた何

CSSセレクタは適用されません。

幸運を祈る！

Answer 4

上記の解決策は私のためには機能しませんでした...角度のある素材がクラス名とスタイルを頻繁に変更することを理解しています。私はこれをグローバルスタイルで行わなければなりませんでした。css

.mat-form-field-underline { 
    background-color: rgb(177, 140, 81) !important; 
} 

.mat-form-field-underline.mat-disabled { 
    background-color: transparent !important; 
}