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

Question

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

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

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

编辑：

STACKBLITZ - DEMO

谢谢

Answer 1

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

Answer 2

可能是您遇到了组件封装问题。您总是可以尝试一些事情，强制更改样式，例如：

::ng-deep 或 /deep/（将被弃用）
:主机上下文
!important（非常糟糕的做法）

在 official documentation

中查找更多信息

虽然您可以使用上述任何选项实现您想要的效果，但库或插件应该允许您修改样式而无需额外配置。也许，如果你分享一个工作示例（Stackblitz 或一些 fiddle），我可以更好地理解你的问题。

Answer 3

将 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

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

How to change the style of an ng-select control when an option is selected

css

sass

angular-ngselect

angular

编辑：