代码之家 › 专栏 › 技术社区 › Jeffrey Stevens

输入:聚焦以更改其他div

input-field css html

1

Jeffrey Stevens · 技术社区 · 9 年前

我想选择我的输入字段,然后我放在输入字段中的段落向上移动。所以当我 input:focus 我想 .tekstenveld p 向上移动。

我正在尝试重新创建一些我在关于创意输入字段的codrop上看到的东西,但我不知道他们如何选择一个东西,然后移动其他东西。

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>

2 回复 | 直到 9 年前

1

Fabrizio Calderan 9 年前

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

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

也许有一个简短的css transition 应用于 bottom 属性使其更美好:

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

(当段落移动到 input 元素)

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

如果在填充输入时还需要将文本保持在输入上方,则可以添加 required 属性 输入 这样改变风格

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

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

2

0

Henrique Barcelos 9 年前

检查此代码并告诉我:)

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>