如何通过：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;
        }

问题是，改变输入占位符的位置绝对和管理它的位置，这样移动整场这不是行为我要找的 。

现在的问题是：
1）如何在不移动字段位置（及其边界）的情况下移动占位符文本并调整其大小？
2）是否可以在没有Javascript / jQuery的情况下执行此操作？

Answer 1

我发现的大多数答案都使用Javascript，但是这一答案仅使用CSS，效果很好！

来源 。 回答的用户：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>