can't change drop-down mat-form-field CSS - Angular material - css

Question

Im having an issue when I try to change the CSS of dropdown using mat-form-field of angular material in two things :
My CSS doesnt change the propertys <option> and <optgroup> .
cant change :hover CSS for <option>
the position ot the dropdown "cuts" the current selected option.
My dropdown style atm (default angular-material) :
drop-down-atm
The html :
<mat-form-field class="drop-down" appearance="fill">
<select matNativeControl [(ngModel)]="currentActiveModeValue" (change)="onModeChange($event)">
<optgroup *ngFor="let mainModes of activeModArry; let i = index" label="{{ mainModes.name }}">
<option *ngFor="let subModes of mainModes.childModes" [value]="subModes.id">
{{ subModes.name }}
</option>
</optgroup>
</select>
</mat-form-field>
The style I wish to do :
the drop-down I need
Really need some help with that, If someone had this problem before :)

Answer 1

I believe native dropdowns are not style-able. You can try to use the material select and add your own classes to be able to style it
<mat-form-field appearance="fill" class="my-class">
<mat-select [(ngModel)]="currentActiveModeValue" (change)="onModeChange($event)">
<mat-optgroup *ngFor="let mainModes of activeModArry; let i = index" [label]="mainModes.name">
<mat-option *ngFor="let subModes of mainModes.childModes" [value]="subModes.id">
{{ subModes.name }}
</mat-option>
</mat-optgroup>
</mat-select>
</mat-form-field>
https://material.angular.io/components/select/overview
Edit: You may need to use the ::ng-deep selector to target the shadow elements that material generates.
Something like:
.mat-form-field ::ng-deep .mat-optgroup {
// styles
}

Answer 2

when you work with some material angular components you need declare the styles "globlally". You can include in your file "styles.sccs"
.mat-optgroup-label {
color:black;
font-weight:600;
border-bottom:1px solid silver;
}
.mat-optgroup .mat-option:not(.mat-option-multiple) {
padding-left: 0!important;
}
.mat-option-text {
border-bottom:1px solid silver;
padding-left:32px;
}
The reason is that some Angular components create the "popup" outsite our component. You can see it in a div called cdk-overlay-container. This components has a property panelClass that allow us only change the css of only this component. That's. In your styles.scss you replace the before .css by -I used "special", you use the word you want
.special .mat-optgroup-label {
color:black;
font-weight:600;
border-bottom:1px solid silver;
}
.special .mat-optgroup .mat-option:not(.mat-option-multiple) {
padding-left: 0!important;
}
.special .mat-option-text {
border-bottom:1px solid silver;
padding-left:32px;
}
And in your select
<mat-select panelClass="special" ...>
...
</mat-select>

Answer 3

In your code example, for the hover to work you must use the material elements and then in the css use the ::ng-deep, also verify that it does not have encapsulation set, in the component's .ts in the #Component.
In the html it would look like this:
<mat-form-field class="drop-down" appearance="fill">
<mat-select matNativeControl [(ngModel)]="currentActiveModeValue" (change)="onModeChange($event)">
<mat-optgroup *ngFor="let mainModes of activeModArry; let i = index" label="{{ mainModes.name }}">
<mat-option *ngFor="let subModes of mainModes.childModes" [value]="subModes.id">
{{ subModes.name }}
</mat-option>
</mat-optgroup>
</mat-select>
</mat-form-field>
and the css would be like this
::ng-deep mat-option:hover {
...
}