入力スタイリングタイプ= "テキスト"の場合のみ

Question

すべての入力が「テキスト」に設定されているとき、それは美しく機能します。

例：私は、このようなtelやemailなどの追加HTML5のinput要素を持っている場合しかし、私のラベルがフィールドに入力した後、別のフィールドをアクティブにするよりも浮くことを拒否 https://jsfiddle.net/beckah/62oozn3t/

。テストするには、「電子メール」入力を入力し、別の入力とタイプを選択します。すべてのヘルプは非常に高く評価されるだろうhttps://jsfiddle.net/beckah/8zpd5n46/1/

：あなたはラベルが一度アクティブでない

例をフロートし続けないことがわかります。 ありがとうございます。

Answer 1

コメントで指摘されているように、コードのこのセクションでは、あなたのCSSの:validセレクタだけでなく、いくつかの他の場所で問題が発生します。

input.question:focus, 
input.question:valid { 
    padding-top: 35px; 
} 

あなたは:validセレクタを使用している、とあなたのテキスト入力で、限り、それが空ではないとして、それが再び崩壊しないだろう、一方、いくつかのケースでは、メールや電話は、それが崩壊し、有効ではありませんので。 JavaScriptを書くのすべての面倒を通過する必要はありません場合は

することは、あなたはそれ通常のテキスト入力することができ、それが携帯電話で利用可能@と.comキーを持っていませんが、設計されたとして、それが動作します。

これを完全に修正するには、textareaまたはinputにテキストが含まれているかどうかをCSSで確認する方法がないため、inputをJavaScriptで確認する必要があります。入力のvalueが空でないかどうかを基本的にチェックし、そうでない場合は、getElementById().style.padding = "35px";

でCSSスタイルを調整してください。単純な解決策はありませんがCSSこのような入力のためのものはまだありません。