I'm currently working with ngx paginator and I need to customize the CSS styles to appear in white color. Here is the code I've tried:
HTML
<div class="paginator__footer-select col col-md-3 offset-md-1 ">
<mat-form-field appearance="outline">
<mat-label class="paginator__footer-perPage">Per page</mat-label>
<select matNativeControl [(ngModel)]="perPage" (ngModelChange)="setPerPage($event)" name="perPage">
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
</select>
</mat-form-field>
</div>
SCSS
.paginator__footer {
padding-top: 42px;
&-select{
font-size: 12px;
display: flex;
align-items: center;
}
input.mat-input-element {
color: #ffffff;
}
&-controls {
font-size: 18px;
display: flex;
align-items: center;
}
}
::ng-deep {
.mat-form-field-appearance-outline .mat-form-field-outline {
color: #ffffff;
}
.mat-select-arrow {
color: white;
}
mat-form-field {
.mat-hint, input, ::placeholder, .mat-form-field-label {
color: #ffffff;
}
}
}
Result:
https://i.sstatic.net/lEh7f.png
The issue I'm facing is with changing the arrow to white color. I attempted to use the following code:
.mat-select-arrow {
color: white;
}
However, it seems to not have any effect. Can anyone suggest a solution to achieve this?