GoogleのMDLテキストフィールドの色を変更するには

Question

私はちょうどこのGoogleマテリアルデザインライトを始めています。そして、私はあなたがこのラベルに焦点を当てるときに、このテキストフィールドが浮かんでいるのを発見しました色は青または海軍またはidkです。

問題がある、私はこのカラーインディゴ・ピンク

<link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css"> 

へのリンクの色を変更しますが藍の色または私はそれに焦点を当てたピンク色への私のTextFieldに変更はありません。

質問は簡単ですが、どのように変更するのですか？

私はこれで何かしましたが、まだそれに運がありません。

HTML：

<form action="#"> 
    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> 
    <input class="mdl-textfield__input" type="text" id="sample4"> 
    <label class="mdl-textfield__label" for="sample3">Text...</label> 
    </div> 
    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> 
    <input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?" id="sample4"> 
    <label class="mdl-textfield__label mdl-color-modifier" for="sample4">Number...</label> 
    <span class="mdl-textfield__error">Input is not a number!</span> 
    </div> 
</form> 

CSS：フォーカス、それはまだあまりにも運がありません：

div .mdl-textfield__label:after { 
    background: pink; 
} 
.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{ 
    color:pink; 
} 

.mdl-color-modifier:focus{ 
    color:pink; 
} 

私は擬似でそれに新しいクラスを適用しようとしました。

Answer 1

私は別の解決策は次のようになり、それは私のために働いたと考えている：

.mdl-textfield__input:focus { 
    border-bottom-color: red; 
    box-shadow: 0 1px 0 0 red; 
} 

私はhereから答えを控除。

Answer 2

私はそれをすべて持っています。キーは:after修飾子とis-focusedクラスです。ちょうど#FAFAFAをindigo-pinkと置き換えてください。これは単なる概念の証明です。フィドルをチェックしてください。テキストラベルも色付きです。

.mdl-textfield.is-focused .mdl-textfield__label { 
    color: #FAFAFA; 
} 

.mdl-textfield__label:after{ 
    background-color: #FAFAFA; 
} 

https://jsfiddle.net/90u6Lxc4/30/