Question

我目前正在使用ng-select下载，如

<ng-select [items]="tests"
           (data)="signalChanged($event)"
           [active]="test"
           id="test)">
</ng-select>

我想在下拉列表中更改活动元素的背景颜色。我如何访问它的CSS？

Answer 1

取自ng-select Documentation page

背景中突出显示的选项的背景颜色和文字颜色   可以使用highlightColor和更改下拉列表   highlightTextColor属性，如以下示例所示。   单选

组件模板
<ng-select
    highlightColor="#9575cd"
    highlightTextColor="#fff"
    [options]="characters">
</ng-select>
多重选择

组件模板
<ng-select
    highlightColor="#9575cd"
    highlightTextColor="#fff"
    [options]="characters"
    [multiple]="true">
</ng-select>

Answer 2

我建议您覆盖here中提到的样式。除此之外，请尝试为组件设置封装。

encapsulation: ViewEncapsulation.None

Answer 3

您可以根据官方文档进行自定义。要找到您需要覆盖的确切类别，请检查并确定该类别。

<ng-select class="custom"></ng-select>
.ng-select.custom {
    border:0px;
    min-height: 0px;
    border-radius: 0;
}
.ng-select.custom .ng-select-container  {            
    min-height: 0px;
    border-radius: 0;
}

如果您使用的是ViewEncapsulation，则应使用特殊的:: ng-deep选择器，以防止对嵌套选择器进行作用域限定。

.ng-select.custom ::ng-deep .ng-select-container  {            
    min-height: 0px;
    border-radius: 0;
}

Unicode具有相同的更多细节。

如何在使用ng-select时更改css？

3 个答案: