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中的嵌套，这又又超出了我的控制范围。

否则，这将很简单。

所以只是想知道是否有人可以通过Pure CSS来解决这个问题，或者是否确实需要一些react.js（页面是内置的）

预先感谢

Answer 1

您的HTML需要看起来像以下内容才能进行这项工作：

.hs-firstname {
  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 class="hs-firstname">
  <input id="firstname" class="hs-input firstname" />
  <label for="firstname">Enter First Name</label>
</div>

请注意，标签必须是输入的同级，并且必须在输入之后才能使同级选择器起作用。不过，您可以使用JavaScript来实现。

Answer 2

使用这种结构和类似的代码

在@James Coyle的答案中，如果单击“标签”将不起作用

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

使用CSS对表单标签进行动画处理

2 个答案: