html - 输入 :focus to change an other div

Question

我想选择我的输入字段，然后我放在输入字段中的段落向上移动。因此，当我有 input:focus 时，我希望 .tekstenveld p 向上移动。

我正在尝试重新创建我在 codrops 上看到的关于创意输入字段的东西，但我无法弄清楚他们如何选择一个东西并移动其他东西。

Here is the link到创意输入字段，这样您就可以理解我的意思。

这是我到目前为止在 JS fiddle 中尝试过的内容

input {
  height: 65px;
  width: 300px;
  outline: none;
  border: none;
  padding: 0 10px 0 10px;
  font-size: 2em;
  font-family: 'Lato';
  border-bottom: 2px solid #000;
  transition: 0.2s;
  -webkit-transition: 0.2s;
  z-index: 100;
}

input:focus {
  border-bottom: 6px solid #D11E1F;
  transition: 0.2s;
  -webkit-transition: 0.2s;
}

.tekstenveld {
  position: relative;
  margin: 10px 0 10px 0;
}

.tekstenveld p {
  position: absolute;
  display: block;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  font-size: 1.5em;
  bottom: 7px;
  left: 12px;
  z-index: 50;
  pointer-events: none;
}

.tekstenveld input:focus p {
  bottom: 40px;
}

<div class="tekstenveld">
  <p>Example text</p>
  <input type="text" class="bedrijfsnaam" name="bedrijfsnaam">
</div>

Answer 1

要在 :focus 上激活纯 css 效果，您需要先切换段落和输入之间的顺序。那么css规则应该是

.tekstenveld input:focus + p {
  ...
}

也许在 bottom 属性上应用一个简短的 css transition 以使其更好:

p {
   ...
   transition: bottom .5s;
}

(当段落移动到 input 元素之上时，确保有足够的空间容纳段落)

这是最终结果:https://jsfiddle.net/0y9k50e5/1/

---

如果您还需要在填充时将文本保留在输入上方，您可以将 required 属性添加到 input 并像这样更改样式

.tekstenveld input:focus + p,
.tekstenveld input:valid + p {
  bottom: 40px;
}

参见 https://jsfiddle.net/0y9k50e5/2/ (注意:此方法适用于IE10+)