Ich triyng, um die Hintergrundfarbe der aktiven Registerkarten in Angular Material zu überschreiben. Ich habe dieses post versucht, aber mit keinem Erfolg. Inspizieren Chrom sehe ich diese Werte:Hintergrundfarbe in aktiven Registern überschreiben Eckiges Material
.mat-tab-group.mat-primary .mat-tab-label:focus, .mat-tab-group.mat-primary .mat-tab-link:focus, .mat-tab-nav-bar.mat-primary .mat-tab-label:focus, .mat-tab-nav-bar.mat-primary .mat-tab-link:focus {
background-color: rgba(241, 204, 206, 0.3);
}
Abhaken ich den gewünschten Effekt, aber wenn ich es in meinem Stylesheet einfügen, geschieht nichts. Irgendwelche Ideen?
EDIT: die volle CSS
.mat-tab-group.mat-primary .mat-tab-label:focus, .mat-tab-group.mat-primary .mat-tab-link:focus, .mat-tab-nav-bar.mat-primary .mat-tab-label:focus, .mat-tab-nav-bar.mat-primary .mat-tab-link:focus {
background-color: rgba(241, 204, 206, 0.3);
}
<style>…</style>
.mat-tab-label:focus {
outline: 0;
opacity: 1;
}
<style>…</style>
.mat-tab-label:focus {
outline: 0;
opacity: 1;
}
<style>…</style>
.mat-tab-label {
height: 48px;
padding: 0 24px;
cursor: pointer;
box-sizing: border-box;
opacity: .6;
min-width: 160px;
text-align: center;
display: inline-flex;
justify-content: center;
align-items: center;
white-space: nowrap;
position: relative;
}
<style>…</style>
.mat-tab-label {
height: 48px;
padding: 0 24px;
cursor: pointer;
box-sizing: border-box;
opacity: .6;
min-width: 160px;
text-align: center;
display: inline-flex;
justify-content: center;
align-items: center;
white-space: nowrap;
position: relative;
}
<style>…</style>
.mat-tab-label, .mat-tab-link {
color: rgba(0, 0, 0, 0.87);
}
<style>…</style>
.mat-ripple {
overflow: hidden;
}
<style>…</style>
.mat-tab-label, .mat-tab-link {
font-family: Roboto, "Helvetica Neue", sans-serif;
font-size: 14px;
font-weight: 500;
}
user agent stylesheet
:focus {
outline: -webkit-focus-ring-color auto 5px;
}
user agent stylesheet
div {
display: block;
}
Inherited from mat-tab-group.mat-tab-group.mat-primary.mat-background-black
<style>…</style>
.mat-tab-group {
font-family: Roboto, "Helvetica Neue", sans-serif;
}
Inherited from mat-card.login-card.mat-card
<style>…</style>
.mat-card {
background: white;
color: rgba(0, 0, 0, 0.87);
}
<style>…</style>
.mat-card {
font-family: Roboto, "Helvetica Neue", sans-serif;
}
danke für die Antwort @Alex, aber es funktioniert nicht, habe ich beide versucht (mit! Wichtig) – Mellville
Verwenden Sie nicht wichtig, können Sie alle CSS aus dev Tools kopieren? – Alex
gerade aktualisiert die Antwort @Alex, danke – Mellville