html - 如何通过使用 :focus? 更改其属性使字段保持在同一个位置

Question

我正在尝试实现与 Google 登录页面的字段相同的效果(即点击该字段时，占位符会更改位置、大小和颜色)。

到目前为止，我已经想出了这个: https://jsfiddle.net/rb846sdn/

CSS:

#emailField {
            width: 100%;
            font-family: Roboto,RobotoDraft,Helvetica,Arial,sans-serif;
            font-size: 14px;
            border: none;
            border-bottom: 1px solid lightgrey;
            color: grey;
        }
        #emailField:focus {
            position:absolute;
            font-size: 11px;
            width: 82%;
            top: 2em;
        }

问题是将输入占位符的位置更改为绝对位置并以这种方式管理它的位置会移动整个字段，这不是我正在寻找的行为 for .

现在是问题:
1) 如何在不移动字段位置(及其边框)的情况下移动占位符文本并调整其大小？
2) 没有 Javascript/jQuery 是否可以做到这一点？

Answer 1

我找到的大多数答案都使用 Javascript，但这个答案只使用 CSS，而且效果很好!

Source .回答的用户:user:9440820

.user-input-wrp {
	position: relative;
	width: 50%;
}
.user-input-wrp .inputText{
	width: 100%;
	outline: none;
	border:none;
	border-bottom: 1px solid #777;
}
.user-input-wrp .inputText:invalid {
	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>