这与ng-select - Change height上的问题有关，我想做完全相同的事情，但是使用了一个ng-select，它允许选择多个项目。
下面是我的ng-select代码：

<label class="col-sm-4 text-sm-right col-form-label">Payout Format</label>
                <div class="col-sm-8">
                    <ng-select
                        [items]="payoutFormats"
                        [multiple]="true"
                        [closeOnSelect]="true"
                        [searchable]="true"
                        bindValue="payoutBatchFormatID"
                        bindLabel="name"
                        placeholder="All"
                        [(ngModel)]="filter.payoutFormats"
                        name="payoutFormats">
                    </ng-select>
                </div>

在我的组件中，我添加了以下样式：

@Component({
    templateUrl: './test.component.html',
    styles: [`
        .ng-select{
            font-size:0.85em;
        }

        .ng-select .ng-select-container {
            min-height: 3px;
        }

        .ng-select.ng-select-multiple .ng-select-container {
            height: 3px;
        }
  `],
})

我可以使用非多选框实现此功能，方法是使用

.ng-select.ng-select-single .ng-select-container {
  height: 20px;
}

但在启用多个时将其从. ng-select. ng-select-single更改为. ng-select. ng-select-multiple对高度没有影响。
下面是我的select在CSS之后的样子：

我需要它小一点。

• • 更新**

在开发工具中，我可以在. ng-select. ng-select-container中更改最小高度，如下所示：

我的选择框会变小：

然而，将相同的样式添加到构件样式中并不会获得此效果：

@Component({
    templateUrl: './list-exceptions-handling-payments.component.html',
    styles: [`
        .ng-select{
            font-size:0.85em;
        }

        .ng-select .ng-select-container{
            min-height: 3px;
        }

        .ng-select.ng-select-multiple .ng-select-container {
            height: 3px;
        }

  `],
})