Css 如何进行占位符和标签转换？

我希望找到一个示例，说明如何使标签/占位符转换向上移动，从占位符位置移动到标签位置，反之亦然

示例：

&

：focus

以一种非常简单的方式完成此任务；）

输入{
位置：绝对位置；
顶部：20px；
}
输入~span{
过渡：top.7s轻松；
位置：绝对位置；
顶部：20px；
}
输入：焦点~span{
顶部：0px；
}

正文

我找到了一个很好的代码笔，它展示了如何在CSS中实现这一点的示例

HTML:

例如：

---

当您添加文本，然后标签向下移动时会发生什么情况？如何在输入文本后将其保持在上面？您需要添加javascript来检查它是否为空。。。没有简单的解决办法。没有这样的输入：空或输入[value=”“]…顺便说一句，chrome输入[value=”“]应该可以工作。。。但是其他的呢？基本上用js检查是否有文本设置，跨度固定在顶部：0px；

<div class="row">
    <input id="name" type="text" name="name">
    <label for="name">Full Name</label>
</div>

.row {
  position: relative;
  margin-top: 35px;
}

input {
    display: block;
    padding: 8px 12px;
    width: 100%;
    max-width: 300px;
    border-radius: 5px;
    border: 0;
}

label {
    position: absolute;
    font-weight: 600;
    color: #777777;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    cursor: text;
    user-select: none;
    transition: 0.15s ease-in-out;
}

input[data-empty="false"] + label,
input:valid + label,
input:focus + label {
    top: -10px;
    left: 0px;
    font-size: 10px;
    color: #ffffff;
}