具有ng-dirty ng-valid的MultiSelect

Question

我正在使用带有css风格的经典选择

Family_Name

现在我使用PrimeNG multiselect，但我对此标记有同样的问题。我不知道如何使用ng-dirty，ng-valid，ng-pristine ......。我按照下面提到的类，但它似乎没有工作

HTML

select.ng-pristine.ng-invalid {
 border-left: 5px solid $primary-600 !important;
}
select.ng-dirty.ng-valid  {
 border-left: 5px solid $valid !important;
}
select.ng-dirty.ng-invalid  {
 border-left: 5px solid $error !important;
} 

CSS

<p-multiSelect [options]="categories" formControlName="categoriesId" optionLabel="label" [filter]="false" [showToggleAll]="false"
                defaultLabel="-- Caterory --" appendTo="body"></p-multiSelect>

如何调整包含项目的面板的大小，使其与选择输入的大小相同？ 如何在项目上方删除包含x的空间？

Answer 1

覆盖ui-multiselect-panel类：

 .ui-multiselect-panel {
     right: 8px;
     left: 8px;
 }

对于十字架：

.ui-multiselect-header .ui-multiselect-close {
   top: 0.3rem !important;
 }

请参阅Plunker