I'm currently utilizing Angular Material for my project. My task involves creating a custom component that includes a md-select component. However, I'm facing an issue where the md-select component needs to have no underline, similar to a workaround provided for AngularJS in this solution.
In attempting to achieve this through defining CSS classes, I've encountered some difficulties:
my.component.html
<span>My Component</span>
<md-select placeholder="My Select" floatPlaceholder="never">
<md-option *ngFor="let option of options"
[value]="option.value">{{option.viewValue}}</md-option>
</md-select>
my.component.scss
.mat-select { /* This configuration works */
display: block;
width: 396px;
height: 34px;
background-color: $pale-gray-two;
padding: 11px 13px 14px !important;
font-size: 11px !important;
color: $greyish-brown-two !important;
}
.mat-select-trigger { /* Unfortunately, this part does not work as intended */
.mat-select-underline {
display:none !important;
}
}