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

【问题标题】：How to change the style of an ng-select control when an option is selected选择选项时如何更改 ng-select 控件的样式
【发布时间】：2020-06-08 03:20:35
【问题描述】：

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

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

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

编辑：

STACKBLITZ - DEMO

谢谢

【问题讨论】：

添加你的 fiddle 或 stackblitz 和你尝试到现在的代码。
我刚刚在 stackblitz 中创建了一个项目，显示了我需要自定义的大纲stackblitz.com/edit/angular-3ll5zo-hqupeg
添加了答案@eddy

标签： css angular sass angular-ngselect

【解决方案1】：

在 style.css 中添加 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

【讨论】：

谢谢aviboy2006 我正要问你我怎么才能摆脱那个蓝色的轮廓，然后我意识到它只是一个阴影。请问您是如何找到准确的选择器的？
我确实在悬停时检查了元素，我检查了效果。然后复制样式并在style.css中编辑。

【解决方案2】：

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

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

在official documentation中查找更多信息

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

【讨论】：

不，我不这么认为，因为我不是试图从组件内部更改样式，而是从全局 styles.scss
由于封装，您将无法从全局 styles.scss 访问子组件。这就是我试图解释的原因。看看docs
不，但我可以设置一个全局样式，以便以后使用。我一直用材料组件这样做
我刚刚在 STACKBLITZ 中添加了一个演示

【解决方案3】：

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

【讨论】：