选择选项时如何更改ng-select控件的样式

Question

我需要使用组件ng-select，但是当我在控件中选择一个选项时，我在选择组件中得到了这个蓝色轮廓：

我需要自定义此样式以使其与其他组件中的样式匹配。 我尝试更改它们在the Custom Styles section中提到的两个类中的outline属性，但没有任何反应

有什么办法可以改变蓝色轮廓的颜色和大小？我应该使用什么课程？

编辑：

STACKBLITZ - DEMO

谢谢

Answer 1

将CSS添加到style.css

.ng-select.ng-select-focused:not(.ng-select-opened)>.ng-select-container {
    border-color: red;
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 0 3px rgba(0,126,255,0.1);
}

https://stackblitz.com/edit/angular-3ll5zo-ko2nzx?file=src/styles.scss

Answer 2

可能您的组件封装有问题。您总是可以尝试一些操作，以强制更改样式，例如：

• :: ng-deep或/ deep /（不推荐使用）
• ：主机上下文
• !important（非常不好的做法）

在official documentation

中查找更多信息

尽管您可以使用上述任何选项来实现所需的功能，但库或插件应允许您无需额外配置即可修改样式。也许，如果您分享一个可行的示例（Stackblitz或一些小提琴），我会更好地理解您的问题。

Answer 3

使用ng-option显示数据 如果您有简单的用例，则可以使用ng-option组件直接在html中省略items数组并绑定选项。