Question

我有一个input字段，其中placeholder。在focus之后，我需要transition placeholder，而应该保持在不同的位置。

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

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

需要仅限CSS 。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

由于我们无法更改HTML，因此当输入收到.container

时，我们将不得不使用伪元素...和新的伪类来定位:focus

:focus-within

:focus-within CSS伪类表示已获得焦点或包含已获得焦点的元素的元素。换句话说，它表示一个元素，它本身与:focus伪类匹配，或者有一个由:focus匹配的后代

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您需要使用输入<label>来实现此效果。你不能用占位符来实现它，因为这是占位符的工作方式，当有焦点时你不能隐藏它们。

如果position: absolute <label>超过了输入，那么您可以transform: translateY()来实现与此相同的效果。

修改：要添加此内容，应通过使用标签执行此操作，而不是依赖于占位符，从而为您提供稍微更好的用户体验和辅助功能。

这也是您想要实现的非常简单的版本：http://plnkr.co/edit/WCdSajNRyM4mj4GBXCHh?p=preview

仅保留输入CSS的占位符

2 个答案: