tommy.bonderenka tommy.bonderenka - 5 months ago 205
CSS Question

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>

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

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

Comments