Change color on mdl-textfield

Question

Is there a built in way to change the color of a Material Design Lite text field? In particular, the default text and underline before the text field is used. In the below example the "Text..." and underline are gray by default. I need them to be white as I'm using 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 don't want to change the color of the text or underline after the text field is selected, just the text and underline when the text field is unused.

score 8 · Accepted Answer · answered Feb 23 '17 at 18:36

8

Just override the default stylesheet:

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

.mdl-textfield__label{
    color: #fff;
}

answered Feb 23 '17 at 18:36

Serg Chernata

12,280
6
32
50

score 3 · Answer 2 · answered Aug 13 '18 at 15:30

3

For me this worked:

.mdl-textfield__label:after {
    background-color: white !important;
}

answered Aug 13 '18 at 15:30

nullmn

557
2
7
19

score 1 · Answer 3 · answered Aug 13 '17 at 15:06

I found some code in the css library file, it look 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 override my style in website, just change the "color", it work! there's more info at the css files. B)

Change color on mdl-textfield

3 Answers3