css - 仅保留输入 CSS 的占位符

Question

我有一个带有 placeholder 的 input 字段。在它的 focus 上，我需要一个 placeholder 的 transition 并且它应该保持在不同的位置。

我无法修改 HTML，因为它是从插件生成的。

我已经实现了转换，但是占位符在它之后消失了。

仅限 CSS 需要它。

Demo

.container {
  margin-top: 80px;
}

input {
  width: 500px;
  font-size: 16px;
}

input::-webkit-input-placeholder {
  -webkit-transition: all 0.3s ease, font-size 0.3s ease;
  transition: all 0.3s ease, font-size 0.3s ease;
}

input:hover::-webkit-input-placeholder {
  -webkit-transition: all 0.3s ease, font-size 0.3s ease;
  transition: all 0.3s ease, font-size 0.3s ease;
}

input:focus::-webkit-input-placeholder {
  -webkit-transform: translateY(-40px);
  transform: translateY(-40px);
  -webkit-transition: all 0.4s ease, font-size 0.4s ease;
  font-size: 12px;
  transition: all 0.4s ease, font-size 0.4s ease;
}

<h3>Todo: Make placeholder persistent</h3>
<div class="container">
  <input type="text" placeholder="This placeholder should stay" />
</div>

Answer 1

由于我们无法更改 HTML，我们将不得不使用一个伪元素...和一个新的伪类来定位 .container当输入接收到 :focus

:focus-within

The :focus-within CSS pseudo-class represents an element that has received focus or contains an element that has received focus. In other words, it represents an element that is itself matched by the :focus pseudo-class or has a descendant that is matched by :focus

.container {
  margin-top: 80px;
  position: relative;
}

.container::before {
  content: "This placeholder should stay";
  position: absolute;
  font-size: 16px;
  color: grey;
  top: 0;
  opacity: 0;
}

.container:focus-within::before {
  font-size: 12px;
  top: -100%;
  opacity: 1;
  transition: all 0.4s ease;
}

input {
  width: 500px;
  font-size: 16px;
}

input:focus::-webkit-input-placeholder {
  opacity: 0
}

<h3>Todo: Make placeholder persistent</h3>
<div class="container">
  <input type="text" placeholder="This placeholder should stay" />
</div>