Angular Material (2) mdSelect: 如何隐藏生成的span.mat-select-下划线标签

Question

我的设计要求 select 表单控件显示时不带下划线，但我很难做到这一点。

线框设计：

实际看m:

指令生成此 HTML 输出：

我写的 SCSS 试图以 mat-select-underline class 为目标，但是一旦指令生成标记。

& md-select {
      padding-top: 0;

      .mat-select-trigger > .mat-select-underline {
        display: none;
      }
    }

我也尝试过使用指令的 panelClass @Input 属性，但我不完全确定在哪里应用它，因为它们仍然正在补充他们的文档。

.mat-no-underline {
      span.mat-select-underline {
        display: none;
      }
    }

<!-- HTML -->
<md-select [(ngModel)]="commodityLine.classCode"
                           panelClass="mat-no-underline"
                           name="shipment_info_commodity_class_{{index}}"
                           placeholder="Class"
                           floatPlaceholder="never"
                           required="true"
                           aria-label="Commodity Class">

                  <md-option *ngFor="let classItem of commodityClassOptions"
                             value="classItem">
                    {{classItem}}
                  </md-option>
                </md-select>

mdSelect API 文档：https://material.angular.io/components/select/api

Answer 1

应用以下样式

md-select .mat-select-underline{
  display:none;
}

LIVE DEMO

Answer 2

您需要在组件中设置 encapsulation: ViewEncapsulation.None。

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  ...
  encapsulation: ViewEncapsulation.None
})

并在组件的 css 文件中使用此 class：

md-select.mat-select-underline{
    display:none;
}

Angular Material (2) mdSelect: 如何隐藏生成的span.mat-select-下划线标签

Angular Material (2) mdSelect: How to hide generated span.mat-select-underline tag

material-design

angular-material

angular-material2

angular