Material Design Lite Styling Eingabefelder

Question

Ich habe einige Schwierigkeiten Styling mdl-Textfeld. Spezifizieren Sie Größe und Farbe der schwebenden Beschriftung und Höhe und Farbe der Animation, nachdem Sie das Eingabefeld gedrückt haben.

Effektiv, das ist mein Ausgangspunkt, wie aus der Komponentenliste entnommen.

https://jsfiddle.net/2aznyc4n/1/

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

Ich bin in der Lage, die Größe und die Farbe des Floating-Label zu setzen, indem in dem HTML-Code

style="font-size:x-large; color:purple" 

in das Etikett Hinzufügen

So ist es eine Art von Fehler, das hat kein Effekt, wenn das Label schwebt, wenn dies im CSS eingestellt ist? Wenn ich den Stil in der html und der CSS einstellen, dann haben beide plötzlich eine Wirkung. Ich kann meinen Kopf einfach nicht darum drehen.

Wenn alles möglich ist, möchte ich vermeiden, in meinem HTML zu stylen.

---

Ich habe in herauszufinden, das Styling der mdl-js-Textfeld Farbe und Höhe ohne Erfolg durch den Quellcode, zu graben.

Answer 1

Normalerweise sollte die Anpassung mit der custom CSS theme builde erfolgen.

Aber wenn Sie lieber Ihre eigenen CSS verwenden, sollten Sie !important verwenden.

.mdl-textfield__input { 
    color: black !important; 
} 

Für den pleaceholder Text müssen Sie Anbieter Präfix CSS:

::-moz-placeholder { /* Firefox 19+ */ 
color: red !important; 
} 

::-webkit-input-placeholder { 
    color: red; 

}

Answer 2

Anpassung von MDL ist ein bisschen langweilig. Zu Beginn können Sie Ihre Grund- und Akzentfarbe wählen und haben eine Reihe von nützlichen und schönen Komponenten, aber wenn Sie etwas ein wenig anpassen müssen, treten Schwierigkeiten auf.

Ich graben für MDL-Quellcode, um zu finden, welche Klassen Farbe und Schriftgröße Styling hinzugefügt. Ich löste die Notwendigkeit, Farbe und Schriftgröße des Eingabetextes anzupassen, der diesen hackenden Code in meinem css hinzufügt.

.mdl-textfield{ input[type="text"]{ font-size: 24px; color: @color500;} } 
    .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{ 
    font-size: 14px; 
    top: -5px; //Manages floating label fly 
    } 
    .mdl-textfield__label{ font-size: 24px; top: 20px; color: @color500;} 

Answer 3

Ich kämpfte wirklich viel spezifisch mit der Bottom-border-color nach der Animation aber zum Glück nach einigen Recherchen konnte ich eine Lösung hier (es ist verboten, um Antworten zu duplizieren, so dass ich eher eine direkte Verbindung setzen erwähnt abzuziehen it):

https://stackoverflow.com/a/43512625/1920145

Hoffe, dass es viel mehr Menschen hilft.