无法获得标签和输入工作焦点 [英] Cant get label and input to work on focus

问题描述

我想在输入顶部获得标签。但是当我在代码中移动它时，CSS Focus样式停止工作。重点标签需要变得更大。如何解决这个问题？尝试了一切......

>

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

< form> <！ - 不工作===================== - > < label for =firstname>名字：< / label> < input id =firstnamename =firstnametype =text> <峰; br> <！ - WORKS ===================== - > < input id =lasttnamename =firstnametype =text> < label for =lasttname> Last name：< / label>< / form>

尝试将标签和输入封装在额外的 div 中，并使用 flex-box ：

form {margin-top：25px;} form input：focus + label {font -size：1.5em;}。form-row {display：flex; flex-direction：列; margin-bottom：8px;}。form-row label {order：1;}。form-row input {order：2; width = 141px;}

< form> <！ - 不工作===================== - > < div class ='form-row'> < input id =firstnamename =firstnametype =text> < label for =firstname>名字：< / label> < / DIV> <！ - WORKS ===================== - > < input id =lasttnamename =firstnametype =text> < label for =lasttname> Last name：< / label>< / form>

b $ b

I want to get the label on top of the input. But when I move it up in the code the CSS Focus styles stop working. On focus the label needs gets bigger. How to fix this? tried everything...

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>

解决方案

Try to wrap label and input in extra div, and use 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>

这篇关于无法获得标签和输入工作焦点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！