模拟占位符

Question

我有一个我不想触摸的Wordpress插件,所以我希望我的目标只能用CSS实现.我在Chrome开发者工具中使用CSS搞砸了(没有双关语),但最终却一团糟.

我想要的是标签位于输入字段的顶部."在顶部"意味着Z-而不是Y轴.下面是HTML结构.提前谢谢你的大脑.

<p>
  <label>Name<br>
    <span>
      <input type="text" name="your-name" value="" size="40">
    </span>
  </label>
</p>

Answer 1

通过小的标记更改和脚本,您可以执行此操作

该脚本只是将用户值附加到其value属性,因此可以使用CSS来设置它的样式

p label {
  position: relative;
}
p label input {
  margin-top: 10px;
}
p label input[required] + span::after {
  content:  ' *';
  color: red;
}
p label span {
  position: absolute;
  top: 2px;
  left: 5px;
  pointer-events: none;
  transition: top .5s;
}
p label input:not([value=""]) + span,
p label input:focus + span {
  top: -20px;
}

<p>
  <label>
      <input oninput="this.setAttribute('value', this.value)" type="text" name="your-name" value="" size="40" required>
      <span>Name</span>
  </label>
</p>

由于使用CSS更改HTML5输入的占位符是一个热门话题,因此这里有一些替代方案,具有更简单,更可重用的标记结构

.placeholder {
  position: relative; padding-top: 15px;
}
.placeholder label {
  position: absolute; top: 17px; left: 5px;
  pointer-events: none; transition: top .5s;
}
.placeholder input[required] + label::after {
  content:  ' *'; color: red;
}
.placeholder input:not([value=""]) + label,
.placeholder input:focus + label {
  top: -5px;
}

<div class="placeholder">
  <input oninput="this.setAttribute('value', this.value)" type="text" name="name" value="" required>
  <label>Name</label>
</div>

由于脚本非常小,我将其应用于内联,但当然可以使用外部事件处理程序添加相同的行为,如此,并且目标不止一个input.

window.addEventListener('load', function() {
  var placeholders = document.querySelectorAll('.placeholder input');
  for (var i = 0; i < placeholders.length; i++) {
    placeholders[i].addEventListener('input', function() {
      this.setAttribute('value', this.value);
    })
  }
})

.placeholder {
  position: relative; padding-top: 15px;
}
.placeholder + .placeholder {
  margin-top: 10px;
}
.placeholder label {
  position: absolute; top: 17px; left: 5px;
  pointer-events: none; transition: top .5s;
}
.placeholder input[required] + label::after {
  content:  ' *'; color: red;
}
.placeholder input:not([value=""]) + label,
.placeholder input:focus + label {
  top: -5px;
}

<div class="placeholder">
  <input type="text" name="name" value="" required>
  <label>Name</label>
</div>
<div class="placeholder">
  <input type="text" name="email" value="" required>
  <label>Email</label>
</div>
<div class="placeholder">
  <input type="text" name="address" value="">
  <label>Address</label>
</div>