Css 如何使ng选择删除和只读

在Angular应用程序中，我有一个小部件的实例：

如果单击它，默认情况下，您可以搜索项目并将更多项目添加到当前选择：

我想改变这种默认行为，特别是：

• 不能添加新元素
• 单击它应该而不是打开搜索栏或项目列表
• 它应该而不是显示向下箭头图标（默认情况下显示在右侧）
• 它应该而不是显示X图标以一次删除所有选择（默认情况下显示在右侧）

所以我希望它是这样的：

---

为了实现这一点，我们首先需要创建3个css类

一个用于禁用向下箭头图标：

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

要禁用“搜索/列表”下拉列表，请执行以下操作：

.ng-select.disable-dropdown ng-dropdown-panel {
  display: none;
}

一个用于禁用“清除所有X”图标：

.ng-select.disable-clear-all .ng-clear-wrapper {
  display: none;
}

然后，我们使用我们创建的3个css类以及一些选项添加

ng select

元素：

<ng-select
  class="disable-arrow disable-dropdown disable-clear-all"
  [searchable]="false"
  [clearable]="true"
  [multiple]="true"
>
</ng-select>

---

要禁用清除所有X图标，请将

[clearable]=“false”

属性添加到您的

ng选择
选项卡，例如：

<ng-select class="disable-clear-all" [clearable]="false" [searchable]="false">
</ng-select>

要隐藏清除和箭头图标：

.ng清除包装{display:none；}
.ng箭头包装{显示：无；}
以下是您仅在以编程方式需要时才需要的内容

<ng-select
    [items]="people3"
    bindLabel="name"
    [disabled]="true"
    [multiple]="true"
    [(ngModel)]="selectedPeople3">
</ng-select>

感谢您的回答，一件小事是：现在选择此选项时，角半径将从圆角变为圆角，因此我添加了此代码以防止出现
.ng-select.ng-select-opened.ng-select-bottom>.ng-select-container{边框右下半径：4px！重要；边框左下半径：4px！重要；}