css - 使用 CSS 动画化表单标签

Question

我正在尝试向标签添加一些简单的动画，因此当您在表单字段中单击时，标签会向上滑动 - 很像 Material Design 动画效果。

我遇到的问题是我们使用的是拉入页面的 Hubspot 表单，所以我实际上无法控制标记。

在我去询问我们的前端开发人员之前，我只是想知道这是否真的可以用纯 CSS 实现？

这基本上就是代码查找表单的方式:

<div class="hs-firstname">
<label>Enter First Name</labe>
<div class="input">
<input class="hs-input firstname"/>
</div>
</div> 

所以自然会想到尝试这样的事情:

input{position:relative;}
label{position:absolute; top:0; left:0; font-size:18px; transition: all 0.2s ease-in-out;}
input:focus ~ label{top:-15px; font-size:12px;}

问题是输入字段嵌套在它自己的 div 中，这又是我无法控制的。

否则这将是直截了当的。

所以只是想知道是否有人可能知道使用纯 CSS 解决这个问题的方法，或者是否确实需要一些 react.js(页面内置)

提前致谢

Answer 1

像这样使用这个结构和代码，

在@James Coyle 的回答中，如果你点击 Label 它将不起作用

.hs-firstname {
  position: relative; 
  margin-top: 50px;
}

input {
  position: relative;
  z-index: 2;
  background: transparent;
  padding: 2px 5px;
  border: 1px solid #999;
}
label {
  position: absolute;
  top: 0;
  left: 5px;
  font-size: 18px;
  transition: all 0.3s ease-in-out;
  z-index: 1;
}

input:focus + label {
  top: -18px;
  font-size: 14px;
}

<div class="hs-firstname">
  <input class="hs-input firstname" />
  <label>Enter First Name</label>
</div>