素材デザインライト入力フィールドをスタイリング

Question

mdl-textfieldをスタイリングすることにいくつかの困難があります。 具体的には、入力フィールドを押した後にアニメーションのフローティングラベル、高さ、色をスタイリングしてカラーリングします。

これは効果的に、コンポーネントリストから取得した私の出発点です。

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> 

私はだから、これは持っているバグのいくつかの種類である

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

HTMLでラベルに追加することで、フローティングラベルのサイズと色を設定することができていますこれがCSSで設定されている場合、ラベルが浮動すると効果はありませんか？私がhtmlのとのスタイルをCSSに設定すると、両方とも突然効果があります。私はちょうどこれのまわりで私の頭を包むことができません。

可能であれば、私は自分のhtmlでスタイリングをしたくないです。

---

私は、MDL-JS-テキストフィールドの色や高さのスタイリングを考え出すでいない成功を収めて、ソースコードを掘りされています。

Answer 1

通常、カスタマイズはで行う必要があります。

しかし、独自のCSSを使用する場合は、!importantを使用する必要があります。あなたは、ベンダープレフィックスCSSを使用する必要がpleaceholderテキストの

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

：

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

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

}

Answer 2

MDLのカスタマイズは少し面倒です。初めに、あなたのプライマリとアクセントの色を選択し、有用で美しいコンポーネントを用意することができますが、少しカスタマイズしなければならないときには、困難が出てきます。

色とフォントサイズのスタイルを追加したクラスを見つけるために、MDLソースコードを探しました。私はcssでこのハッキングコードを追加して入力テキストの色とフォントサイズを調整する必要性を解決しました。

.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

私は本当にアニメーションの後に下のボーダー色と特異的にたくさん苦労したが、ありがたいことに、いくつかの研究の後、私はこっちに言及したソリューションを差し引くことができ（答えを複製することを禁じていますので、私はむしろに直接リンクを置きますそれ）：

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

はそれがより多くの人々がお役に立てば幸いです。