ng-select 使用图像 url 更改下拉箭头

Question

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

有参考使用如下字体真棒 - 这是有效的

.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 中的背景图像。 但是，我无法让图像显示在下拉菜单中

谢谢，阿尼

Answer 1

我用图标字体更改了箭头图标，并在关闭/打开时添加了旋转动画

.ng-select {
     .ng-arrow {
         font-family: "icomoon" !important;
         border-color: inherit !important;
         border-width: 0 !important;
         font-size: 16px;
         top: 0 !important;
         left: -3px;
         color: inherit;
         text-align: center;
         transform: rotate(0deg);
         transform-origin: 8px 12px;
         transition: transform 0.2s ease;
         &:before {
             content: "\e60f";
         }
   }

   &.ng-select-opened {
       .ng-arrow {
           transform: rotate(180deg);
       }
   }
}

Answer 2

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

有参考使用如下字体真棒 - 这是有效的

.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 中的背景图像。 但是，我无法让图像显示在下拉列表中

谢谢，阿尼