无法获得标签和输入以专注于工作答案

【问题标题】：Cant get label and input to work on focus无法获得标签和输入以专注于工作
【发布时间】：2016-04-04 10:51:53
【问题描述】：

我想获得输入顶部的标签。但是当我在代码中向上移动它时，CSS 焦点样式停止工作。专注于标签需求变得更大。如何解决这个问题？什么都试过了……

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

【解决方案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>

【讨论】：

有效，但现在如何在字段顶部获取标签？这个我看不懂.....因为标签在下面我不能用BLOCK把它弄起来....
@AlexeyTseitlin 哦，我没有先得到你想要的东西。我编辑了我的答案，现在它写在flexbox，应该可以正常工作。
很好的答案！非常感谢！）没有flex可以吗？
@AlexeyTseitlin 好吧，如果您的标签具有相同的高度，则可以使用 position:absolute 完成。但我认为flexbox 是一个很棒的功能，你应该使用它。目前由94% of browsers 支持。

【解决方案2】：

一个 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;
}

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

【讨论】：