模拟占位符

小编典典

模拟占位符

css

我有一个不想触摸的Wordpress插件，所以我希望我的目标只能通过CSS来实现。我在Chrome开发者工具中摆弄了CSS（没有双关语），但一直到头都一团糟。

我想要的标签是在输入字段的顶部。“在顶部”表示Z-而非Y轴。以下是HTML结构。在此先感谢您动动脑筋。

<p>

  <label>Name<br>

    <span>

      <input type="text" name="your-name" value="" size="40">

    </span>

  </label>

</p>

阅读 241

2020-05-16

共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>

2020-05-16