マテリアライズCSSのテキストボックスには、私はマテリアライズのCSSでテキストボックス内のアニメーションのこのタイプを作成する中央アニメーション

Question

からボーダーを展開します。ウェブサイトの多くのcodepenをチェックしましたが、cssのマテリアライズに役立つものは何も見つかりません。時には2つの境界線が表示されるか、時には効果がありません。

誰かがCSSのソースコードを提供していますので、実装することができます。私は他のCSSライブラリを含めたくありません。マテリアライズCSSと少しのCSSだけで。

.input-field input[type=text]:focus { 
    border-bottom: 1px solid #000; 
    box-shadow: 0 1px 0 0 #000; 
    } 

プレシードの後または前にこれをカスタマイズすると効果があります。ここで

作成したペンは：

https://codepen.io/naitik_kundalia/pen/bRNeaz

私は国境をスライド作成していたが、それはまた、逆に働きます。アニメーションが終了した後で、テキストボックスがフォーカスで削除されました。

Answer 1

チェックこのペン：

$(".mat-input").focus(function(){ 
$(this).parent().addClass("is-active is-completed"); 
}); 
$(".mat-input").focusout(function(){ 
if($(this).val() === "") 
$(this).parent().removeClass("is-completed"); 
$(this).parent().removeClass("is-active"); 
}); 

https://codepen.io/legeoffrey/pen/VYMLNq

ホープこれはあなたに私はそれが唯一のCSSで可能だと思う