html - 清除按钮用于 md-select 箭头溢出

Question

我有一个md-select内部md-grid-list，它是md-card内容的一部分，如下所示：

<md-grid-tile>
     <md-select id="typ" [(ngModel)]="doc.docType" placeholder="Typ Dokumentu">
         <md-option *ngFor="let state of states" [value]="state">{{ state}}</md-option>
     </md-select>

     <button class="clear" [hidden]="!doc.docType" (click)="clear('docType')">X</button>

</md-grid-tile>

如您所见，“X”按钮在选择值时呈现，并在单击事件时将其清除。只需将md-select模型属性设置为undefined

现在，我想将“X”按钮放置在mat-select-arrow隐藏/覆盖它的上方。

你能帮我设置“清除”按钮的样式以向左移动并隐藏那个箭头吗？设置margin-right时它只移动整个md-select左边但不覆盖箭头。

我相信这对很多人都有帮助。

谢谢！

Answer 1

这是基本示例，css positioning如果您需要转向x右侧，则必须position像以下示例一样进行操作。

.box {
  width: 300px;
  height: 30px;
  position: relative;
  background: #ddd;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.cross {
  position: absolute;
  top: 5px; /* You can play with this property */
  right: 5px; /* You can play with this property */
  font-size: 14px;
  color:#000;
  cursor: pointer;
}

<div class="box">
  <span class="cross">x</span>
</div>