Solución:
suponga que está usando esto:
https://material.angular.io/components/select/overview
La flecha aquí está hecha con CSS puro:
::ng-deep .mat-select-arrow {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid;
margin: 0 4px;
}
para cambiar esto, anule los valores del borde y establezca una imagen de fondo
Editar: agregar ::ng-deep
; ver comentario de @Ruben Szekér
Tuve el mismo problema y tuve que establecer la propiedad ‘border-image-source’.
::ng-deep .mat-select-arrow {
border-left: 15px solid transparent !important;
border-right: none !important;
border-top: 15px solid transparent !important;
border-image-source: url('my img url') !important;
border-image-repeat: stretch !important;
}
¡Espero que esto ayude!
Hay dos formas de lograr el CSS personalizado para material angular:
Método 1) Desactivando viewencapsulation
:
import { Component, OnInit, **ViewEncapsulation** } from '@angular/core';
import { MatTabChangeEvent } from '@angular/material/tabs';
@Component({
selector: 'app-sample-component',
templateUrl: './sample-component.component.html',
styleUrls: ['./sample-component.component.css'],
encapsulation: ViewEncapsulation.None // *** This line disables the view encapsulation
})
export class SampleComponent implements OnInit {
}
Ventaja:
Puede anular directamente las propiedades de la clase de material en el sample-component.component.css
igual que:
.mat-tab-label {
width: 33.3%;
height: 55px !important;
}
.mat-ink-bar {
background-color: #0a4963;
}
/*** To change the arrow color ****/
.mat-select-arrow {
border-top: 5px solid rgb(10, 73, 99);
}
Método 2) Forma tradicional (sin deshabilitar la encapsulación) (Evitar):
Ventaja: No se debe realizar ningún cambio en el componente Cambio en component.component.css
igual que:
::ng-deep .mat-tab-label {
width: 33.3%;
height: 55px !important;
}
::ng-deep .mat-ink-bar {
background-color: #0a4963;
}
/*** To change the arrow color ****/
::ng-deep .mat-select-arrow {
color: rgb(10, 73, 99);
}
/*** /deep/ too works ****/
/deep/ .mat-select-arrow {
color: rgb(10, 73, 99);
}
DESVENTAJA (Una advertencia para el Método 2):
Angular planea eliminar el soporte para ng-deep. Existe esta conversación reciente sobre git para las alternativas. También se indica en el sitio oficial angular como ::ng-deep
está diseñado solo para amortiguar durante el apoyo a la depricacion.
Use / deep /, >>> y :: ng-deep solo con encapsulación de vista emulada. Emulated es la encapsulación de vista predeterminada y más utilizada. Para obtener más información, consulte la sección Control de encapsulación de vista.
Referencias:
https://github.com/angular/angular/issues/25160
https://angular.io/guide/component-styles#deprecated-deep–and-ng-deep