Question

我的html模板中的select组件显示良好。但是，我想用红色边框显示此组件，当前它以灰色显示。我无法实现这一目标。

我正在使用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中，您将“ .ng-select”定位为目标，是否尝试将其定位为元素而不是类？

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

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

Answer 2

我认为这是一个针对角度视图封装和浏览器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 3

您可能正在寻找的被称为::ng-deep *。检查documentation了解更多详细信息。 *请注意，它目前处于已淘汰状态。

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

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

Answer 4

<ng-multiselect-dropdown #multiSelect [placeholder]="'Select Service'" [settings]="dropdownSettings" class="custom-dropdown"
  [data]="dropdownList">
</ng-multiselect-dropdown>

提供自定义类，例如custom-dropdown 然后在你的 style.scss 覆盖它，例如

.custom-dropdown .multiselect-dropdown {
    position: relative;
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
    color: #757575 !important;
    font-family: "Gilroy-SemiBold", "Arial", serif !important;
    .dropdown-btn {
        border: 1px solid #red !important;
    }
}

如何将ng-select组件的边框颜色更改为红色？

4 个答案: