Form design using css
<p>Referring to the HOSHI design on this website:</p>

<p><a href="http://tympanus.net/Development/TextInputEffects/index.html" rel="nofollow">http://tympanus.net/Development/TextInputEffects/index.html</a></p>

<p>I tried replicating the same in my plnkr:</p>

<p><a href="http://plnkr.co/edit/qvU6o8Z9HEhSJtX01Ef2?p=preview" rel="nofollow">http://plnkr.co/edit/qvU6o8Z9HEhSJtX01Ef2?p=preview</a></p>

<p>In the original website, after entering text, the label does not come back to it's position but remains on top</p>

<pre><code>.input__field--hoshi {
    margin-top: 5em;
    padding: 0.85em 0.15em;
    width: 100%;
    background: transparent;
    color: #595F6E;
}
</code></pre>

<p>But in my plnkr, I am not able to replicate the same effect. I can't seem to understand why this is happening</p>