如何将占位符移到顶部的焦点和键入时？ [英] How to move placeholder to top on focus AND while typing?

问题描述

任何人都可以向我显示代码，使占位符的行为像这样？

Could anyone show me the code to make the placeholder behave like this?

https://www.westernunion.com/us/en/wu/login-rp.html

我不确定这是否只是html / css

I'm not sure if this is just html/css or any javascript too.

我目前的CSS看起来像这样，我还没有js代码：

My current css looks like this, and I have no js code yet:

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;
}

这几乎是工作（不像链接一样完美）但是当我开始输入时，占位符消失。

It almost does the work (isn't as perfect as the link), but the placeholder disappears when I start typing. I'm using twitter-bootstrap, if that makes anything easier!

谢谢。

推荐答案

您可以这样做

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/

Working JSFiddle here https://jsfiddle.net/273ntk5s/2/

这篇关于如何将占位符移到顶部的焦点和键入时？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！