Edit in JSFiddle

+function($){
    if ($('html').hasClass('lte9')) {
        /* LTE IE9 */
        /*
         * Shim for :placeholder-shown
         * Add .placeholder-shown class to the text field elements then value is set
         */
        var placeholderShown = function(e, self) {
            var self = $(self || this),
                shown = 'placeholder-shown',
                hasValue = !!self.val();
            self.toggleClass(shown, !hasValue);
        }, d = $(document), ns = 'input[type=text],input[type=url],input[type=tel],input[type=number],input[type=file],input[type=email],textarea';
        $(ns).each(function(key, elem) {
            placeholderShown(null, elem);
            d.on('keyup', ns, placeholderShown);
        });
    }
}(jQuery);

<div class="field -simple">
  <input type="text" class="placeholder-shown" placeholder="Some placeholder" />
  <label>Some placeholder</label>
</div>

<div class="field -simple">
  <input type="text" class="placeholder-shown" placeholder="Some placeholder" value="Some text" />
  <label>Some placeholder</label>
</div>

<div class="field -md">
  <input type="text" class="placeholder-shown" placeholder="Some placeholder" />
  <label>Some placeholder</label>
</div>

<div class="field -md">
  <input type="text" class="placeholder-shown" placeholder="Some placeholder" value="Some text" />
  <label>Some placeholder</label>
</div>

.field {
  font-size: 16px;
  position: relative;
  color: gray;
  margin-top: 2em;
}

input,
label {
  font-family: sans-serif;
  font-size: 1em;
  padding: .75em .5em .5em;
}

.-simple input {
  border: 1px solid gainsboro;
  border-radius: 4px;
}

.-md input {
  background: transparent;
  border: none;
  border-bottom: 2px solid gainsboro;
  outline: none;
}

.-md input:focus,
.-md input:hover {
  border-bottom: 2px solid lightblue;
}

label {
  position: absolute;
  top: 0;
  left: 0;
  color: gainsboro;
  transition: font-size .5s, color .5s, left .5s, top .5s;
}

input:not(.placeholder-shown) + label,
input:not(:placeholder-shown) + label,
input:hover + label,
label:hover {
  /** input is not empty */
  top: -2em;
  left: -.5em;
  font-size: .8em;
  color: inherit;
}

input:placeholder-shown + label {
  /** input is empty */
}

::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: transparent;
}

::-moz-placeholder {
  /* Firefox 19+ */
  color: transparent;
}

:-ms-input-placeholder {
  /* IE 10+ */
  color: transparent;
}

:-moz-placeholder {
  /* Firefox 18- */
  color: transparent;
}