Question

我的设计要求显示选择表单控件而不显示下划线，但我很难完成此操作。

线框设计：

实际看看：

该指令生成此HTML输出：

我编写的SCSS尝试定位 mat-select-underline 类，但是一旦指令生成标记就不会应用它。

& 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

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

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

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

在组件的css文件中使用此类：

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

Answer 2

应用以下样式

A<-c("A","A","A")
B<-c("B","B","B")
C<-c("C","C","C")
D<-c("D","D","D")
E<-c("E","E","E")
F<-c("F","F","F")

A <- as.data.frame(A)
colnames(A) <- "id2"
B <- as.data.frame(B)
colnames(B) <- "id2"
C <- as.data.frame(C)
colnames(C) <- "id2"
D <- as.data.frame(D)
colnames(D) <- "id2"
E <- as.data.frame(E)
colnames(E) <- "id2"
F <- as.data.frame(F)
colnames(F) <- "id2"

<强> LIVE DEMO

角度材质（2）mdSelect：如何隐藏生成的span.mat-select-underline标签

2 个答案: