【问题标题】: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>

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多