自定义Angular中ng-multiselect-dropdown组件边框及箭头样式

要实现只保留下边框、隐藏其他边框，同时修改箭头样式，你需要通过CSS穿透（适配Angular组件样式隔离机制）覆盖组件默认样式，具体操作如下：

1. 修改文本框边框样式 #

定位到组件的下拉按钮容器类.multiselect-dropdown .dropdown-btn，通过以下样式移除左、右、上边框，仅保留底部边框：

组件内样式（需穿透隔离） #

如果在使用该组件的子组件.component.scss文件中添加样式，需要用::ng-deep突破Angular的样式隔离：

::ng-deep .multiselect-dropdown .dropdown-btn {
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
  /* 可自定义下边框样式，比如颜色、宽度 */
  border-bottom: 1px solid #ccc !important;
  /* 可选：移除默认圆角，让边框更贴合需求 */
  border-radius: 0 !important;
}

全局样式（无需穿透） #

如果在styles.scss等全局样式文件中添加，直接编写即可：

.multiselect-dropdown .dropdown-btn {
  border-left: none;
  border-right: none;
  border-top: none;
  border-bottom: 1px solid #ccc;
  border-radius: 0;
}

2. 修改箭头标记样式 #

组件的箭头对应类是.dropdown-btn .dropdown-arrow，你可以按需修改颜色、大小、方向等，示例如下：

/* 组件内样式需加::ng-deep，全局样式则不需要 */
::ng-deep .multiselect-dropdown .dropdown-btn .dropdown-arrow {
  /* 修改箭头颜色 */
  color: #666;
  /* 修改箭头大小 */
  font-size: 14px;
  /* 可选：旋转箭头方向 */
  transform: rotate(180deg);
}

组件代码说明 #

你的原组件代码无需修改，保持如下结构即可：

<ng-multiselect-dropdown  [placeholder]="'Select Your Item'"
                         [settings]="dropdownSettings"
                         [data]="dropdownList"
                         formControlName="category"
                         (onSelect)="onItemSelect($event)"
                         (onSelectAll)="onSelectAll($event)"
                         (onDeSelect)="onItemDeSelect($event)"
                         (onDeSelectAll)="onUnSelectAll()">
</ng-multiselect-dropdown>

注意：!important用于确保自定义样式优先级高于组件默认样式，若全局样式中优先级足够，可省略该声明。

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