How to make field stay in the same place with changing it's attributes with :focus?

Question

I'm trying to achieve the same effect as Google login page has for it's field (ie upon clicking the field the placeholder changes location, size and color).

So far I've come up with this: 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;
        }

The problem is that changing the position of the input placeholder to absolute and managing it's position that way moves the whole field which is not behavior I'm looking for .

And now the questions:
1) How to move and resize the placeholder text without moving the field location (and it's borders)?
2) Is it possible to do this without Javascript/jQuery?

Answer 1

Most answers I've found use Javascript but this one uses just CSS and works great!

Source . User who answered: 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>