用于md选择箭头溢出的清除按钮

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

即可

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

你能帮助我设置“清除”按钮的样式，向左移动并隐藏箭头吗？ 设置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>