清除md-select箭头溢出按钮

Question

我在md-grid-list中有一个md-select，它是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上以隐藏/覆盖它。

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

​