angular-ngselect - ng-select angular 5 在悬停时更改选项列表中项目的背景颜色

Question

我正在尝试更改选项列表中项目的背景颜色：悬停。我注意到有一个标记的类在悬停时添加到 div 标签中。

我在使用 ng-select 组件的角度组件中有这个：

 ng-select {
    .ng-option {
      .marked {
        background-color: red;
      }
    }
  }

它不工作。处理 ng-select 悬停时更改背景颜色的最佳方法是什么

Answer 1

在您的 css/scss 文件中：

.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked {
    background-color: red;
}

不要忘记在 style.scss 中导入 ng-select 样式。

// Import ng-select component styles
@import "~@ng-select/ng-select/themes/default.theme.css";

如果您希望在悬停时更改下拉按钮颜色，请使用：

.ng-select .ng-select-container:hover{
    background-color: yellow;
}

Answer 2

我使用 scss 将 css 从 ng-select 转换为 scss，然后导入 scss 文件并在需要的地方进行更改。希望这可以帮助。