如何更改material2 md輸入佔位符的字體大小和顏色？

Question

如何更改material2 md輸入佔位符的字體大小和顏色？

check this image link

Answer 1

你可以寫你自己的風格在造型CSS/SCSS例如：

md-input-container{ width: 100%; .md-input-placeholder { 
color: #a8a8a8; 
padding: 0 12px; 

&.md-float { 
    &.md-focused, 
    &:not(.md-empty) { 
    transform: translateY(-100%) scale(0.95); 
    } 
} }} 

Answer 2

您需要使用：主機選擇在你的CSS：

:host input.md-input-element { 
    color: red; 
    font-size: 18px; 
} 

Answer 3

注意：/ deep /現在已被取消，請使用：host :: ng-deep。請記住:: ng-deep在技術上也被棄用，將被替換爲組合器，但應暫時使用

您正在運行的問題是使用ViewEncapsulation。這是一個煩惱，但從我已經能夠收集它是按預期工作。

雖然有一些額外的角色可以根據自己的喜好改變風格，但您的確有這個能力。你必須使用special selector: /deep/

舉例來說，如果你想爲你的問題描述，你會創建這樣的風格來改變佔位符文本的顏色：

/deep/ .mat-input-placeholder { 
    color: #fff; 
    font-size: 2em; 
} 

然而，這不會改變下劃線樣式。如果你想改變，你想補充另一種風格，如：

/deep/ .mat-input-ripple.mat-focused { 
    background-color: #fff; 
} 

如果你仍然想樣式特定組件內的材料組件，您可以使用:host selector：

:host /deep/ .mat-input-placeholder { 
    font-size: 2em; 
}