css - 将 mat-divider 添加到 mat-select/mat-option

Question

是否可以有一个垫子分隔线(一条水平线分隔两个垫子选项)？

我试过:

<mat-form-field>
  <mat-label>Cars</mat-label>
   <select matNativeControl required>
     <option value="volvo">Volvo</option>
     <mat-divider></mat-divider>
     <option value="saab">Saab</option>
     <option value="mercedes">Mercedes</option>
     <option value="audi">Audi</option>
   </select>
</mat-form-field>

我现在有一个糟糕的解决方法是:

<mat-option>--------------------------</mat-option>

但这并不理想。

Answer 1

我不确定您希望分隔线如何显示，但纯 CSS 方法是覆盖主 styles.css 上的 .mat-option 类>，利用 :after pseudo element ，并向 border-bottom CSS 属性添加一个值。

.mat-option:after {
  content: '';
  width: 100%;
  border-bottom: solid 2px black;
  position: absolute;
  left: 0;
  z-index: 1;
  top: calc(3em - 2px);
}

我已经通过 here 创建了一个演示.