Change color on mdl-textfield

Question

Is there a built-in way to change the color of the Material Design Lite text box? In particular, the default text and underscore in front of the text box are used. In the example below, "Text ..." and the underline are grayed out by default. I need them to be white when I use a dark background.

<!-- 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> 

I do not want to change the color of the text or underline after selecting the text field, just the text and underline when the text field is not used.

Answer 1

Just override the default stylesheet:

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

Answer 2

I found the code in the css library file, it looks like this:

 .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} 

then I tried to redefine my style on the website, just changing the “ color ”, it works! there is more information in css files. IN)