Как изменить цвет границы компонента ng-select на красный?

Question

Компонент select в моем угловом HTML-шаблоне отображается нормально.Однако я хочу отобразить этот компонент с красной рамкой, в настоящее время он отображается серым цветом.Я не могу этого добиться.

Я использую Angular 5

<ng-select class="custom" [searchable]="true" formControlName="contactList" [items]="contactLists" 
     bindLabel="name" 
     placeholder="{{ 'PLACEHOLDERS.CONTACT_LIST' | translate }}" [compareWith]="compareResource">
</ng-select>

, пользовательский CSS определен в файле, и он выглядит следующим образом

.ng-select.custom {
    min-height: 0px;
    max-width: 350px;
}
.ng-select.dropdown {
    border: 1px solid black;
} 

Answer 1

Я думаю, что это проблема, связанная с угловым обзором инкапсуляции и специфичностью браузера css.Я также видел, что вы используете border: 1px solid black;, а не красный, как вы упомянули в вопросе.

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

https://dzone.com/articles/what-is-viewencapsulation-in-angular

Answer 2

То, что вы, вероятно, ищете, называется ::ng-deep*.проверьте документацию для получения дополнительной информации.* помните, что в данный момент он устарел.

::ng-deep .ng-select.custom {
        min-height: 0px;
        max-width: 350px;
}

::ng-deep .ng-select.dropdown {
    border: 1px solid black;
} 

Answer 3

В вашем CSS вы нацелены на ".ng-select", вы пытались нацелить его как элемент, а не как класс?

 ng-select.custom {
     min-height: 0px;
     max-width: 350px;
 }

 ng-select.dropdown {
     border: 1px solid black;
 }