Kann Etikett und Eingabe nicht erhalten, um am Fokus zu arbeiten

Question

Ich möchte das Etikett über den Eingang bekommen. Aber wenn ich es im Code nach oben verschiebe, funktionieren die CSS-Focus-Stile nicht mehr. Im Fokus wird der Etikettenbedarf größer. Wie behebe ich das? alles versucht ...

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

Versuchen zu wickeln Etikett und Eingang in zusätzlichen div, und verwenden Sie 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

Eine jQuery Lösung.

$(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>