input:focus 换一个 div

Question

我想 select 我的输入字段，我输入字段中的段落向上移动。所以当我有 input:focus 时，我想 .tekstenveld p 向上移动。

我正在尝试重新创建我在 codrops 上看到的关于创意输入字段的内容，但我无法弄清楚它们如何 select 一件事，然后移动另一件事。

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+）

Answer 2

检查此代码并告诉我:)

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">
  <input type="text" class="bedrijfsnaam" name="bedrijfsnaam">
  <p>Example text</p>
</div>

input:focus 换一个 div

input:focus to change an other div

html

css

input-field