清除按鈕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」 buttor呈現當選擇了值並在點擊事件中清除它時。只是將md-select模型屬性設置爲undefined

現在，我想將'X'按鈕放在mat-select-arrow上以隱藏/覆蓋它。

你能幫我css風格的'清除'按鈕左移一點，並隱藏該箭頭？ 當設置爲margin-right時，它只會將整個md-select左移但不包括箭頭。

我相信這對許多人都有幫助。

謝謝！

Answer 1

這是csspositioning基本例如，如果您需要轉移到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>