I'm looking to have the label displayed on top of the input field. However, when I rearrange the code to achieve this, the CSS Focus styles no longer work properly. Specifically, I want the label to enlarge when the input field is focused. Any ideas on how to resolve this issue? I've tried various approaches but nothing seems to be working...
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>