控制周圍角材料mdInput邊境

我想風格我mdInput控制到周圍有一個黑盒子：控制周圍角材料mdInput邊境

<md-form-field> 
     <input type="text" mdInput [(ngModel)]="row.price" placeholder="Price"> 
    </md-form-field>

我試圖把一個div與周圍風格=「BORDER輸入控制：1px的純黑色;「但是它僅在輸入控件本身創建邊框。我嘗試將邊框添加到md-form-field中，但它僅將邊框放置在左側和右側（但如果我能夠在頂部和底部獲得邊框，則以高度進行判斷，看起來好像我能夠實現）實現這一目標？

來源

2017-09-19 AlexanderM

覆蓋默認材質2樣式的推薦方法是使用ViewEncapsulation。 deep，::ng-deep和>>>的貶值和未來（official documentation）可能下降。

不推薦使用陰影刺穿後代組合器，並且支持將從主要瀏覽器和工具中刪除。因此，我們計劃在Angular中支持（對於/deep/,>>>和:: ng-deep）中的所有3個。

要設置邊框的投入，包括在以下的component.ts：

import { ViewEncapsulation } from '@angular/core'; 

@Component({ 
    .... 
    encapsulation: ViewEncapsulation.None 
})

...然後只需添加以下在組件樣式：

/* To display a border for the input */ 
.mat-input-flex.mat-form-field-flex{ 
    border: 1px solid black; 
} 

/* To remove the default underline */ 
.mat-input-underline.mat-form-field-underline { 
    background: transparent; 
} 

/* To remove the underline ripple */ 
.mat-input-ripple.mat-form-field-ripple{ 
    background-color: transparent; 
}

這是working demo。

來源

2017-09-20 07:07:22 Faisal

當焦點位於輸入框中時，更改邊框的類是什麼？ – AlexanderM

試試這個：

::ng-deep .mat-input-wrapper{ 
background-color:black; 
}

或（取決於你的需要）

::ng-deep .mat-input-wrapper{ 
    border: 2px solid black; 
}

DEMO

封裝：ViewEncapsulation.None有它的缺點，它會影響所有類，你希望與否。它仍然沒有被棄用，我想它會被其他東西取代。

來源

2017-09-19 22:09:39 Vega

您還沒有測試過您的解決方案的輸出:) – Faisal

控制周圍角材料mdInput邊境

回答

相關問題