Create floating text box like Gmail using google material design lite

Question

I am using the Material design lite library and trying to create a Floating text box like what google has for the Gmail. I didn't find any documentation for the component, however I tried the below code

<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label has-placeholder">
     <input class="mdl-textfield__input" type="text" id="sample5" placeholder="">
     <label class="mdl-textfield__label" for="sample5">Text lines...</label>
</div>

This creates a design something like this

I am trying to design the text box something like this

Is there any way to create this design ?

Answer 1

Here is what I created:

<div id="googleLogIn" style="position:absolute;">
 <input type="text" style="border:6px solid blue;height:35px;width:300px;position:absolute;top:50px;" 
 placeholder="">
 <p style="background-color:white;width:100px;position:absolute;left:20px;top:25px;padding:3px;">
 Email or phone</p>
</div>

It makes something close to what you want it to be.

Answer 2

Try using HTML tags feildset and legend:

<span style="font-family:arial;font-size:.9em">
    <fieldset style="width:300px;border-color:blue;border-radius:5px;padding:10px">
    <legend style="color:blue">&nbsp;Email or phone&nbsp;</legend>
    <input type="text" style="border:0;font-size:2em">
    </fieldset><br>
</span>
<span style="font-family:arial;color:blue;font-weight:bold">Forgot email?</span>