CODEWITHSUNDEEP
htmlcssmaterial-designtextfieldmaterial-design-lite
andrew
andrew

Reputation: 5579

Change color on mdl-textfield

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.

Upvotes: 7

Views: 5302

Answers (3)

nullmn
nullmn

Reputation: 607

For me this worked:

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

Upvotes: 3

ljcucc
ljcucc

Reputation: 89

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)

Upvotes: 1

Serg Chernata
Serg Chernata

Reputation: 12400

Just override the default stylesheet:

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

.mdl-textfield__label{
    color: #fff;
}

Upvotes: 8

Related Questions