html - 如何在输入时将占位符移到焦点上方并输入？

我希望占位符在文本框处于焦点状态时以及在用户键入时移至顶部。

我不确定这是否只是html / css或任何javascript。

我当前的CSS看起来像这样，而且我还没有JS代码:

input:focus::-webkit-input-placeholder {
    font-size: .75em;
    position: relative;
    top: -15px;
    transition: 0.2s ease-out;
}

input::-webkit-input-placeholder {
    transition: 0.2s ease-in;
}

input[type="text"]:focus, input[type="password"]:focus {
    height: 50px;
    padding-bottom: 0px;
    transition: 0.2s ease-in;
}

input[type="text"], input[type="password"] {
    height: 50px;
    transition: 0.2s ease-in;
}

它几乎可以完成工作，但是当我开始键入时，占位符消失了。我正在使用twitter-bootstrap，如果这样可以使一切变得更简单!

谢谢。

最佳答案

你可以这样

HTML:

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

CSS:

input:focus ~ .floating-label,
input:not(:focus):valid ~ .floating-label{
  top: 8px;
  bottom: 10px;
  left: 20px;
  font-size: 11px;
  opacity: 1;
}

.inputText {
  font-size: 14px;
  width: 200px;
  height: 35px;
}

.floating-label {
  position: absolute;
  pointer-events: none;
  left: 20px;
  top: 18px;
  transition: 0.2s ease all;
}

在这里工作JSFiddle https://jsfiddle.net/273ntk5s/2/

关于html - 如何在输入时将占位符移到焦点上方并输入？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35942247/