CODEWITHSUNDEEP
javascriptcssmaterial-designmaterial-design-lite
tommybond
tommybond

Reputation: 650

Material Design Lite dynamically change color

I'm using Material Design Lite (getmdl.io) for my web app. I have a textbox with a floating label;

I want to change the underline color of the text field to a custom color, not one I defined as my primary color (the line that appears when you focus the textbox).

How can I change this color via either CSS or Javascript?

Edit:

This is how the MDL text fields are implemented but some JS is used to do the dynamic underline on the bottom.

You can also see an example in motion here 

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

Upvotes: 2

Views: 5487

Answers (3)

yuriy636
yuriy636

Reputation: 11661

.mdl-textfield__label:after{
    background-color: #3f51b5 !important;
}

Not sure if !important is necessary, but it comes in handy when modifying a CSS framework.

Upvotes: 3

Ronnie Smith
Ronnie Smith

Reputation: 18565

You can change the color of the floating text. No need to hack at the background-color. Here's your available colors (and MDL codes) - https://rack.pub/swatch.

mdl-color-text--yellow-500

https://codepen.io/rhroyston/pen/YWVBkJ

Upvotes: 2

dippas
dippas

Reputation: 60563

Because you are using MDL and not the regular Materialize.CSS, and by doing a few tests, that line comes from this script:

<script defer src="https://code.getmdl.io/1.1.3/material.min.js"></script>

MDL provides 19 possible colors to have, which you can have by adding --color to class where the element you want to change.

But that's for background-color in the element, in this case it is applied to pseudo element ::after, so you can use a custom color as you wish using color teal

div .mdl-textfield__label:after {
  background: teal
}
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.1.3/material.min.js"></script>
<form action="#">
  <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
    <input class="mdl-textfield__input" type="text" id="sample3">
    <label class="mdl-textfield__label" for="sample3">Text...</label>
  </div>
</form>

Here is a an already existent Codepen with all possible colors

You can always build your own theme here

Upvotes: 5

Related Questions