Another MD input box, but this one is declarative. Requires a separate CSS file. Works on IE11.

material_design_skin.js

var oMDPage = ( function( _d ){  //  Material Design INPUT Labels
    var aInp = [], aLab = [], sBrand="", bBound = false, nCnt = -1;
    function onInpFoc( _el ){  //  focus
        if( typeof _el.dataset.mdLabel !== "undefined" ){
            var sPH = _el.getAttribute("placeholder");
            if( sPH ){
                _el.dataset.mdLabelPh = sPH;
                _el.placeholder = "";
                aLab[ _el.dataset.mdLabel ].classList.remove( "h-vs__hidden" );                
            }
        }
    }
    function onInpBlur( _el ){  //  blur
        if( typeof _el.dataset.mdLabel !== "undefined" ){
            if( typeof _el.dataset.mdLabelPh !== "undefined" ){
                if( !_el.value ){
                  _el.placeholder = _el.dataset.mdLabelPh;
                  aLab[ _el.dataset.mdLabel ].classList.add( "h-vs__hidden" );                  
                }
            }
        }
    }
    function parsePH( sPH ){
        return sPH.replace("* ", "");
    }
    return {
        bind: function( _sBrand ){  //  Wire Events
            sBrand = _sBrand.toLowerCase();
            aInp = [].slice.call( _d.querySelectorAll( "[data-md-page]") ).filter(function( el ){
                return ( !el.dataset.mdLabel );  //  Exclude Existing
            });
            aInp.map( function( _inp ){
                var eLab = _d.createElement("LABEL");
                nCnt++;
                eLab.textContent = parsePH( _inp.placeholder );
                eLab.setAttribute("for", _inp.id);
                eLab.classList.add("label-md__lab");
                eLab.classList.add("h-vs__hidden");
                aLab.push( eLab );
                _inp.parentNode.insertBefore(eLab, _inp);
                _inp.dataset.mdLabel = nCnt;
                _inp.dataset.mdLabelCl = _inp.className;
                _inp.classList.add( "label-md__inp" );
                _inp.addEventListener("focus", function( _ev ){ onInpFoc(_ev.currentTarget); });
                _inp.addEventListener("blur", function( _ev ){ onInpBlur(_ev.currentTarget); });
                if( _inp.value ){
                  if( typeof _inp.dataset.mdLabel !== "undefined" ){
                      var sPH = _inp.getAttribute("placeholder");
                      if( sPH ){
                          _inp.dataset.mdLabelPh = sPH;
                          _inp.placeholder = "";
                          aLab[ _inp.dataset.mdLabel ].classList.remove( "h-vs__hidden" );      
                      }
                  }
                }
            } );
          bBound = true;
        }
    };
} )( document );
oMDPage.bind( "A55" );

<style>
    .h-vs__hidden{ visibility: hidden; }
input.label-md__inp {
    background-color: #fff;
    border-radius: 4px;
    box-shadow: none;
    color: #343a40;
    display: block;
    font-size: 16px;
    height: 40px;
    padding: 6px;
    z-index: 1;
}
/* Bootstrap and Zurb Foundation Smackdown  */
label.label-md__lab {
    background-color: rgb(255, 255, 255) !important;
    cursor: text !important;
    display: inline !important;
    font-family: sans-serif !important;
    font-size: 14px !important;
    left: 6px !important;
    position: relative !important;
    top: 10px !important;
    margin: 0px 0px 0px 8px !important;
    padding: 0px 6px !important;
}
input.label-md__inp { border: 1px solid #a1b5c2; }
input:focus.label-md__inp { border: 1px solid #343a40; }
label.label-md__lab { color: #343a40; }
</style>

Reviewing this pattern from a A11y perspective.