html - 无法获得标签和输入以专注于工作

标签 html css forms animation label

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

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>

最佳答案

尝试将标签和输入包裹在额外的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>

关于html - 无法获得标签和输入以专注于工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36400631/

相关文章:

javascript - 有没有办法从 d3.js 偏移弧线

angular - 无法读取 null 的属性 'required'

javascript - onblur 不起作用,但 onchange 起作用吗?

JavaScript 在 JSFiddle 中运行,但不能独立运行

html - 控制单列/双列布局中的 div 顺序?有可能吗?

CSS3 label标签朝右使用位置或:after

javascript - ASP 表单问题

json - Golang json.decoder 无法仅解码来自浏览器的请求

html - 编译 Azure DevOps Widget : Can't resolve 'TFS/Dashboards/WidgetHelpers' 时出错

javascript - 不同的背景图片jquery mobile