如何在Angular中移除ng-select下拉菜单的箭头？

你可以通过覆盖ng-select的内置CSS样式来移除下拉箭头，以下是两种常用方案：

方案一：组件内局部样式（仅对当前组件生效） #

由于Angular的样式隔离机制，需要使用::ng-deep穿透样式，将代码添加到组件的.component.css/.scss文件中：

/* 隐藏当前组件内所有ng-select的箭头 */
::ng-deep .ng-select .ng-arrow-wrapper {
  display: none;
}

/* 仅隐藏你代码中指定id的ng-select箭头（匹配id="selectServiceType"） */
::ng-deep #selectServiceType .ng-arrow-wrapper {
  display: none;
}

方案二：全局样式（对整个项目生效） #

在项目根目录的styles.css或styles.scss文件中添加样式，无需使用::ng-deep：

/* 隐藏项目中所有ng-select的箭头 */
.ng-select .ng-arrow-wrapper {
  display: none;
}

/* 仅隐藏指定id的ng-select箭头 */
#selectServiceType .ng-arrow-wrapper {
  display: none;
}

如果你的ng-select已经设置了readonly属性，结合上述样式可以让组件外观更贴近普通文本容器，彻底移除下拉交互的视觉标识。

内容的提问来源于stack exchange，提问作者Chathura Jayawardhane