Html 输入：焦点更改其他div

我想选择我的输入字段，我放在输入字段中的段落向上移动。因此，当我有

input:focus

时，我希望

.tekstenveld p

向上移动

我试图重新创建我在codrops上看到的关于创造性输入字段的东西，但我不知道他们如何选择一个东西，然后移动另一个东西

到创造性输入字段，这样你就可以理解我的意思

以下是我到目前为止在中国所做的尝试

输入{
高度：65px；
宽度：300px；
大纲：无；
边界：无；
填充：0 10px 0 10px；
字号：2em；
字体系列：“Lato”；
边框底部：2倍实心#000；
过渡：0.2s；
-webkit转换：0.2s；
z指数：100；
}
输入：焦点{
边框底部：6px实心#D11E1F；
过渡：0.2s；
-webkit转换：0.2s；
}
tekstenveld先生{
位置：相对位置；
利润率：10px 0 10px 0；
}
tekstenveld p{
位置：绝对位置；
显示：块；
-webkit用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
用户选择：无；
字号：1.5em；
底部：7px；
左：12px；
z指数：50；
指针事件：无；
}
.tekstenveld输入：焦点p{
底部：40px；
}

示例文本

要在

上激活纯css效果：聚焦

首先需要在段落和输入之间切换顺序。那么css规则应该是

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

可能需要在

底部

属性上应用一个短css

转换

，以使其更好：

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

（当段落移动到

输入

元素上方时，确保段落有足够的空间）

以下是最终结果：

---

如果填充时还需要将文本保持在输入上方，则可以向

输入添加
required
属性，并按如下方式更改样式

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

看
（注意：此方法适用于IE10+
检查此代码并让我知道：）


输入{
高度：65px；
宽度：300px；
大纲：无；
边界：无；
填充：0 10px 0 10px；
字号：2em；
字体系列：“Lato”；
边框底部：2倍实心#000；
过渡：0.2s；
-webkit转换：0.2s；
z指数：100；
}
输入：焦点{
边框底部：6px实心#D11E1F；
过渡：0.2s；
-webkit转换：0.2s；
}
tekstenveld先生{
位置：相对位置；
利润率：10px 0 10px 0；
}
tekstenveld p{
位置：绝对位置；
显示：块；
-webkit用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
用户选择：无；
字号：1.5em；
底部：7px；
左：12px；
z指数：50；
指针事件：无；
}
.tekstenveld输入：焦点+p{
底部：40px；
}

示例文本

使用语义标记。将您的
更改为
是，您的方法与上面的方法相同，并且有效！所以非常感谢你。：）不过我还有一个问题。。。如果我用文本填充输入，然后单击其他地方，那么焦点自然不再集中在输入上。因此，现在浮动在上面的文本与输入的文本发生碰撞。如何使其在输入文本时保持在输入字段上方浮动？请参阅我的更新，这是一种仅使用css的方法，但需要IE10+。否则，您需要使用javascript