入力：有効なそれが必要ように動作しません：有効な私が材料設計フォームが、入力を行っている

Question

有効でない場合でもトリガ。フォーカスまたは場合：そうラベルは、フォームではなく、場合でなければなりません、私は

.link-入力入力を削除した場合、有効なラベルは、フォントサイズ

.link-input input:focus ~ label, 
.link-input input:valid ~ label { 
    top: -20px; 
    font-size: 14px; 
    color: #5264AE; } 

を上に移動し、変更する必要があります：有効〜に上記の構文からラベル

：焦点がちょうどいい作品。ここ

問題は、入力が有効な入力として空のフィールドを見ていること、であるjsfiddle https://jsfiddle.net/onjpeo7g/1/

Answer 1

上の例です。

body .page .content .generator-box .link-input input:focus ~ label, 
body .page .content .generator-box .link-input input:valid ~ label 

へ：

だから、あなたからのセレクタを変更

body .page .content .generator-box .link-input input:focus ~ label, 
body .page .content .generator-box .link-input input:valid:not(:empty) ~ label 

Updated Fiddle