Struggling to make the label and input function properly when focused

Question

Struggling to make the label and input function properly when focused

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>

html css forms animation label

Answer 1

Answer №1

To improve the structure, consider enclosing both the label and input elements in an additional div, and utilize 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>
  
    <!-- TRY THIS
=====================
-->
  <div class='form-row'>
    <input id="firstname" name="firstname" type="text">
    <label for="firstname">First name:</label>
  </div>

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


</form>

Answer 2

To improve the structure, consider enclosing both the label and input elements in an additional div, and utilize 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>
  
    <!-- TRY THIS
=====================
-->
  <div class='form-row'>
    <input id="firstname" name="firstname" type="text">
    <label for="firstname">First name:</label>
  </div>

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


</form>

Answer 3

Answer №2

A jQuery approach.

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

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

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


</form>

Answer 4

A jQuery approach.

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

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

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


</form>

Struggling to make the label and input function properly when focused

Answer №1

Answer №2

Similar questions

A guide on adding specific rows together in a list

External CSS styling does not appear to be affecting the Shadow DOM in Google Chrome

Incorporate an email sign-up form at the conclusion of the video

What is the best way to display the current page within a frame in HTML?

Enhance the color scheme of your collapsed or expanded Bootstrap NAV for mobile devices

Disabling a jQuery function on an external page: Step-by-step guide

Ways to align the content in the middle of a div with CSS

The active class consistently adds new menu options without removing the previous ones

Working with both Javascript and jQuery code within a single HTML file

JavaScript is restricted from being accessed beyond the confines of the ui-view element

background-color has some unexpected effects

What is the best way to make my JSON data trigger an alert when the button on my HTML page is clicked?

What is the best way to position the bottom block?

Effective ways to implement Select2 tags while utilizing the newline character tokenSeparator

Utilizing Bootstrap 3: Achieving Varied Font Sizes within a Row with Bottom Alignment

Can using display: none impact the SEO of a website's navigation menu?

How can I open a new window, redirect the current one, and bring focus to the new window using JavaScript?

Switch up the link color when it pops up

Utilizing Flask's get and post methods in conjunction with AJAX integration

Ways to refresh a component on a webpage without having to refresh the entire page