フォーカスを取得するためにラベルと入力を取得する

Question

入力の上にラベルを貼りたい。しかし、コード内で動かすと、CSS Focusスタイルの動作が停止します。フォーカスすると、ラベルのニーズが大きくなります。これを修正するには？ jQueryのソリューションは、

form { 
 
    margin-top: 25px; 
 
} 
 

 
input { 
 
    
 
    display:block; 
 
} 
 

 
form input:focus + label { 
 
    font-size: 1.5em; 
 
}

<form> 
 
    
 
    <!-- DOESN'T WORK 
 
===================== 
 
--> 
 
    <label for="firstname">First name:</label> 
 
    <input id="firstname" name="firstname" type="text"> 
 

 
    <br> 
 
    
 
    <!-- WORKS 
 
===================== 
 
--> 
 
    <input id="lasttname" name="firstname" type="text"> 
 
    <label for="lasttname">Last name:</label> 
 

 

 
</form>

Answer 1

余分divにラベルと入力を包むようにしてください、とflex-boxを使用します。

form { 
 
    margin-top: 25px; 
 
} 
 
form input:focus + label { 
 
    font-size: 1.5em; 
 
} 
 

 
.form-row { 
 
    display: flex; 
 
    flex-direction: column; 
 
    
 
    margin-bottom: 8px; 
 
} 
 

 
.form-row label { 
 
    order: 1; 
 
} 
 

 
.form-row input { 
 
    order: 2; 
 
    width: 141px; 
 
}

<form> 
 
    
 
    <!-- DOESN'T WORK 
 
===================== 
 
--> 
 
    <div class='form-row'> 
 
    <input id="firstname" name="firstname" type="text"> 
 
    <label for="firstname">First name:</label> 
 
    </div> 
 

 
    <!-- WORKS 
 
===================== 
 
--> 
 
    <input id="lasttname" name="firstname" type="text"> 
 
    <label for="lasttname">Last name:</label> 
 

 

 
</form>

Answer 2

...すべてのものを試してみました。

$(function() { 
 
    $('form input[type="text"]').focus(function() { 
 
    $(this).prev('label').css("font-size", "1.5em"); 
 
    }); 
 
    $('form input[type="text"]').focusout(function() { 
 
    $(this).prev('label').css("font-size", "1em"); 
 
    }); 
 
});

form { 
 
    margin-top: 25px; 
 
} 
 
form input:focus + label { 
 
    font-size: 1.5em; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 

 
    <!-- DOESN'T WORK 
 
===================== 
 
--> 
 
    <label for="firstname">First name:</label> 
 
    <input id="firstname" name="firstname" type="text"> 
 

 
    <!-- WORKS 
 
===================== 
 
--> 
 
    <input id="lasttname" name="firstname" type="text"> 
 
    <label for="lasttname">Last name:</label> 
 

 

 
</form>