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>

然而这并不理想。

标签： cssangularangular-materialmaterial-design

Answer 1

我不确定您希望分隔线如何显示，但纯 CSS 方法是覆盖.mat-optionmain 上的类styles.css，使用:after 伪元素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);
}

我在这里创建了一个演示。