2017-02-23 75 views
6

是否有內置的方式來更改Material Design Lite的顏色text field?特別是,使用文本字段前的默認文本和下劃線。在下面的例子中,「Text ...」和下劃線默認爲灰色。我需要它們變白,因爲我使用的是深色背景。在mdl-textfield上更改顏色

<!-- Simple Textfield --> 
<form action="#"> 
    <div class="mdl-textfield mdl-js-textfield"> 
    <input class="mdl-textfield__input" type="text" id="sample1"> 
    <label class="mdl-textfield__label" for="sample1">Text...</label> 
    </div> 
</form> 

我不想改變文本的顏色或選擇文本字段後強調,只是文本,並強調當文本字段未使用。

回答

6

只是覆蓋默認樣式表:

.mdl-textfield__input{ 
    border-bottom: 1px solid #fff; 
} 

.mdl-textfield__label{ 
    color: #fff; 
} 
+0

謝謝,這個工程! – andrew

0

我發現在CSS庫文件中的一些代碼,它看起來像這樣:

.mdl-textfield--floating-label.is-focused .mdl-textfield__label,.mdl-textfield--floating-label.is-dirty .mdl-textfield__label,.mdl-textfield--floating-label.has-placeholder .mdl-textfield__label{color:#3f51b5;font-size:12px;top:4px;visibility:visible} 

然後我試圖重寫我的網站風格,只是改變「顏色」,它的工作! 有更多的信息在CSS文件。 B)