将占位符移至焦点输入上方

Question

我正在寻找将占位符文本移动到焦点输入上方的 css 代码。我在 这里 找到了这段代码。这段代码是完美的，但我的输入标签被包裹在 <span> 中，因此一般同级选择器不起作用。任何想法如何编辑这个CSS？

 <div>
  <span class='blocking-span'>
  <input type="text" class="inputText" />
  </span>
  <span class="floating-label">Your email address</span>
</div>

原文由 trenccan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

在这种情况下，您可以使用 CSS 伪选择器 :placeholder-shown 来检测何时将假占位符移开。请参见下面的示例：

 label {
  margin:20px 0;
  position:relative;
  display:inline-block;
}

span {
  padding:10px;
  pointer-events: none;
  position:absolute;
  left:0;
  top:0;
  transition: 0.2s;
  transition-timing-function: ease;
  transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
  opacity:0.5;
}

input {
  padding:10px;
}

input:focus + span, input:not(:placeholder-shown) + span {
  opacity:1;
  transform: scale(0.75) translateY(-100%) translateX(-30px);
}

/* For IE Browsers*/
input:focus + span, input:not(:-ms-input-placeholder) + span {
  opacity:1;
  transform: scale(0.75) translateY(-100%) translateX(-30px);
}

 <label>
  <input placeholder=" ">
  <span>Placeholder Text</span>
</label>

原文由 Stanley 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

使用给定的链接 CSS 等，只需将 floating-label 移动到 --- blocking-span 中。

By using position: relative on the div the floating-label will still re-position as if it were outside the blocking-span

 div {
  position: relative; /*  make label relate to div  */
  padding-top: 10px;  /*  make space for label      */
}
.inputText {
  font-size: 14px;
  width: 200px;
  height: 25px;
}
.floating-label {
  position: absolute;
  pointer-events: none;
  left: 15px;
  top: 18px;
  transition: 0.2s ease all;
}
input:focus ~ .floating-label,
input:not(:focus):valid ~ .floating-label {
  top: -6px;
}

 <div>
  <span class='blocking-span'>
    <input type="text" class="inputText" required/>
    <span class="floating-label">Your email address</span>
  </span>
</div>

原文由 Asons 发布，翻译遵循 CC BY-SA 3.0 许可协议