html - 在占位符 CSS 中移动标签

Question

我有这个样本:

link

代码 HTML:

<div class="field">
    <label>First Name</label>
    <div class="control">
        <input type="text" class="input-text">
    </div>
</div>

代码 CSS:

.field{
  position: relative;
}

.label {
  position: absolute;
  pointer-events: none;
  left: 10px;
  top: 2px;
  transition: 0.2s ease all;
  font-size: 15px;
}

input:focus ~ .label,
input:not(:focus):valid ~ .label {
  top: -6px;
}

基本上我希望当用户在输入中输入内容时，标签会移动到输入上。

这个只能从css中获取吗？

能否更改我创建的示例以准确理解这是如何完成的？

提前致谢!

Answer 1

请试试这个适度的代码

.field{
  position: relative;
}

label {
  position: absolute;
  pointer-events: none;
  left: 10px;
  top: 2px;
  transition: 1.2s ease all;
  font-size: 15px;
}
input:focus ~ label{
  top:-10px;
  font-size:12px;
  opacity: 1; 
	margin-left: 45px;  
	transition: all 1.5s ease-out; 
	-webkit-transform: rotate(720deg);   
	zoom: 1;
}

<div class="field">
	<input type="text" class="input-text">
  <label>First Name</label>
</div>