材料設計Liteは動的に私は私のWebアプリケーションのための材料設計ライト（<a href="http://getmdl.io" rel="nofollow">getmdl.io</a>）を使用していた色

Question

を変更します。私は浮動小数点のテキストボックスを持っていますlabel;

私はカスタムカラー、私は私の原色（あなたがテキストボックスにフォーカスしたときに表示される行）として定義されていないものに、テキストフィールドの下線の色を変更したいです。

どのように私は、CSSやJavaScriptのいずれかを経由してこの色を変更できますか？

編集：

これは、MDLのテキストフィールドが実装されている方法ですが、いくつかのJSは、底面のダイナミック下線を行うために使用されます。

あなたがMDLを使用していない通常のMaterialize.CSSを、そしていくつかのテストを行うことによって、その行は、このスクリプトから来ているので、あなたはまた、運動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

の例を見ることができます：

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

MDLは、あなたが要素は、変更したいクラスに--colorを追加することで持つことができる持っている19点の可能な色を提供します。

しかし、それはこの場合には、それが擬似要素::afterに適用され、要素にbackground-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>

を使用して望むようにカスタムカラーを使用することができますあなたは、常に独自のテーマを構築することができ、すべての可能な色

ですでに存在Codepenです

Answer 2

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

わからない!important場合には必要であるが、CSSフレームワークを変更する際には便利です。

Answer 3

フローティングテキストの色を変更できます。背景色をハックする必要はありません。利用可能な色（およびMDLコード）はhttps://rack.pub/swatchです。

mdl-color-text--yellow-500

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