ng-select 使用图片网址更改下拉箭头

如何解决ng-select 使用图片网址更改下拉箭头

我正在尝试使用资产文件夹中的图像来更改 ng-select 下拉箭头。

有参考可以使用如下所示的 font-awesome - 这是有效的

.ng-select .ng-arrow-wrapper .ng-arrow {
    display: none;
}

.ng-select span.ng-arrow-wrapper:before {
    content: "\f0ab";
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
}

但是，我正在尝试类似下面的方法来实现它：

.ng-select ::ng-deep .ng-arrow {
  display: none;
}
.ng-select ::ng-deep .ng-arrow-wrapper {
  height: 14px;
  width: 14px;
  background-image: url('../assets/arrowhead-down.svg');
  background-repeat: no-repeat;
  margin-right: 12px;
  margin-left: 10px;
  margin-top: 5px;
}
.ng-select-opened ::ng-deep .ng-arrow-wrapper {
  background-image: url('../assets/arrowhead-down.svg');
}

然而，这并不是渲染资产图像。感谢任何输入。

^^ 这是我用于下拉箭头的图像插入符号

对我来说，这里的问题不是资产的使用。我正在尝试使背景图像 url 工作（它可以是任何 url）。原因是我正在使用角度元素，其中一个元素将使用此 ng-select。由于这些元素将成为 javascript 导入的一部分，因此我不能将其作为资产的一部分。因此，我正在尝试使用我们托管的 CDN 中的背景图像。但是，我无法在下拉菜单中显示图像

谢谢， 阿尼

解决方法

我明白 OP 想要在这里做的就是答案 - 我试过了，它有效。

.ng-select .ng-arrow-wrapper .ng-arrow {
  border-color: none !important;
  border-style: none !important;
  border-width: 0 !important;
}
.ng-select .ng-arrow-wrapper {
  background-image: url('/assets/img/arrowhead-down.svg');
  background-repeat: no-repeat;
  background-size: 14px 14px;
  margin-top: 2px;
}

最初我发布了一个不同的答案，但我明白问题是什么 - 但是，资产路径应该始终以 / 开头。请用积极的反对票来反击你的反对票！ ?????? 你不需要使用 ng-deep。