Manipulierendes Winkelmaterial Eingabeform Styling

Question

Ich bin neu in Angular und Angular Material (AM). Standardmäßig zeigt AM Input Component die Farbe primary Ihrer Palette an, bis Sie auf das Formular klicken, in dem dann der placeholder Wert und die Markierungslinie in die Farbe accent geändert werden. Gibt es eine Möglichkeit, das Formular so zu manipulieren, dass die Akzentfarbe immer angezeigt wird? Mit anderen Worten, das Formular wird immer hervorgehoben. Das Problem ist, dass meine Primärfarbe dunkel ist und der Hintergrund meiner Website-Seite ebenfalls dunkel ist. Daher sind die placeholder und die Markierungslinie kaum sichtbar, es sei denn, das Formular wird vom Benutzer angeklickt. Dies wäre auch ein schöner Farbzusatz auf der Seite meiner Seite. Hier

ist die Probe des erforderlichen HTML vom :

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

Sie können color="accent" fügen die input line, aber auch hier die Farbe erscheint nur, wenn das Formular auf vom Benutzer angeklickt wird.

Vielen Dank im Voraus.

Answer 1

Sie hinzufügen können Sie Ihre Komponente CSS-Datei folgende in :

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

demo

Answer 2

Jedes HTML Element erzeugt aus einem Angular Materialkomponente bekommt eine Klasse mat-CSS-Klasse ihm zugeordnet. Sie können zum Stylen verwendet werden.

Die Eingabekomponente, über die Sie sprechen, enthält einige verschachtelte Elemente. Sie müssen also entscheiden, wo Sie Ihr Styling anwenden möchten.

Um Styling für die gesamte Eingang Wrapper-Verwendung:

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

die generierten HTML-Inspect-Klassen für die mehr verschachtelten Elemente zu sehen - wie mat-input-element

Answer 3

Ich hatte ein ähnliches Problem mit der Breite meines Formularfelds anpassen. Bei der Untersuchung festgestellt, dass die Antwort, die Nehals Antwort referenzierte, korrekt ist, aber auch in der neuesten Version 5.0.0-rcX, https://angular.io/guide/component-styles, veraltet ist. Ich habe weiterhin meine CSS-Selektoren überprüft, fand aber, dass ich die ViewEncapsulation ändern musste.

Was für mich gearbeitet wurde in meinem css/SCSS Datei (natürlich mit Ihrem eigenen Selektoren ändert je nach Bedarf):

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

Und in meinen Komponenten ts-Datei:

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

Ohne Änderung Bei der Kapselung würde der CSS-Selektor nicht angewendet.

Viel Glück!

Answer 4

Die obigen Lösungen funktionierten nicht für mich ... Ich verstehe, dass eckiges Material ihre Klassennamen und Stile oft ändert. Ich musste dies in meinem globalen Stil tun.css

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

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