Material Design Lite dynamisch Farbe ändern

Question

Ich verwende Material Design Lite (getmdl.io) für meine Web-App. Ich habe eine Textbox mit einem schwimmenden label;

Ich möchte die Unterstreichungsfarbe des Textfelds in eine benutzerdefinierte Farbe ändern, nicht eine, die ich als meine primäre Farbe definiert habe (die Linie, die angezeigt wird, wenn Sie das Textfeld fokussieren).

Wie kann ich diese Farbe über CSS oder Javascript ändern?

Edit:

Dies ist, wie die MDL Textfelder implementiert werden, aber einige JS verwendet wird, um die dynamische unterstrichen auf dem Boden zu tun.

Sie können auch ein Beispiel in Bewegung 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 1

Weil Sie verwenden MDL und nicht die regelmäßige Materialize.CSS, und indem Sie ein paar Tests sehen, kommt diese Zeile aus diesem Skript:

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

MDL bietet 19 mögliche Farben, die Sie haben können, indem Sie der Klasse hinzufügen, in der das Element geändert werden soll.

Aber das ist für background-color in dem Element, in diesem Fall ist es angewendet wird Element Pseudo ::after, so dass Sie eine benutzerdefinierte Farbe verwenden können, wie Sie Farbe verwenden möchten 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>

Hier ist eine bereits existierende Codepen mit allen möglichen Farben

Sie können immer Ihr eigenes Themabauen

Answer 2

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

Nicht sicher, ob !important ist notwendig, aber es ist praktisch, wenn ein CSS-Framework zu modifizieren.

Answer 3

Sie können die Farbe des Fließtexts ändern. Keine Notwendigkeit, auf die Hintergrundfarbe zu hacken. Hier sind Ihre verfügbaren Farben (und MDL-Codes) - https://rack.pub/swatch.

mdl-color-text--yellow-500

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