No se puede obtener la etiqueta y la entrada para trabajar en el enfoque

Quiero poner la etiqueta encima de la entrada. Pero cuando lo muevo hacia arriba en el código, los estilos CSS Focus dejan de funcionar. En el enfoque, la etiqueta necesita cada vez más. ¿Cómo arreglar esto? intenté todo …

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

Intenta envolver la etiqueta y la entrada en div adicional, y usa 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; } 
 

Una solución jQuery.

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