将占位符置于焦点输入上方 [英] Move placeholder above the input on focus

问题描述

我正在寻找可将占位符文本移至焦点输入上方的css代码。我发现此代码此处。这段代码是完美的，但我的输入标签被封装在< span> 中，因此一般的兄弟选择器不起作用。任何想法如何编辑这个CSS？

 < div> 
< span class ='blocking-span'> 
< input type =textclass =inputText/> 
< / span> 
< span class =floating-label>您的电子邮件地址< / span> 
< / div> 
  

解决方案

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

通过在 div 上使用 position：relative ， 浮动标签仍会重新定位，就好像它位于阻止范围之外

div {position：relative; / *使标签与div相关* / padding-top：10px; / *为标签添加空格* /}。inputText {font-size：14px;宽度：200px;身高：25px;}。floating-label {position：absolute;指针事件：无; left：15px;顶部：18px;转换：0.2s缓解所有;}输入：focus~ .floating-label，input：not（：focus）：valid~.floating-label {top：-6px;}

< div> < span class ='blocking-span'> < input type =textclass =inputTextrequired /> < span class =floating-label>您的电子邮件地址< / span> < / span>< / div>

I'm looking for css code that move the placeholder text above the input on focus. I found this code here. This code is perfect but my input tag is wrapped inside <span> and for that reason general sibling selector is not working. Any ideas how to edit this css?

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

解决方案

With the given links CSS etc, simply move the floating-label inside the 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>

这篇关于将占位符置于焦点输入上方的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！