如何在打字时将占位符移动到焦点和顶部？

Question

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

我不确定这是否只是 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，如果这会让任何事情变得更容易！

谢谢。

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

Answer 1

你可以这样做

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/

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

Answer 2

 .user-input-wrp {
	position: relative;
	width: 50%;
}
.user-input-wrp .inputText{
	width: 100%;
	outline: none;
	border:none;
	border-bottom: 1px solid #777;
 	box-shadow: none !important;
}
.user-input-wrp .inputText:focus{
	border-color: blue;
	border-width: medium medium 2px;
}
.user-input-wrp .floating-label {
	position: absolute;
	pointer-events: none;
	top: 18px;
	left: 10px;
	transition: 0.2s ease all;
}
.user-input-wrp input:focus ~ .floating-label,
.user-input-wrp input:not(:focus):valid ~ .floating-label{
	top: 0px;
	left: 10px;
	font-size: 13px;
	opacity: 1;
}

 <h1>The floating label</h1>
<div class="user-input-wrp">
  <br/>
  <input type="text" class="inputText" required/>
  <span class="floating-label">Your email address</span>
</div>

稍微修改了@user1846747 的代码。

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