mimimalistic material inputs

tried to do it without js but failed.

HTML

<div class="material-input">
  <input type="text" value=""/>
  <label>Username</label>
</div>

CSS

body{
  background: #fff;
  font-family: Helvetica Neue,Helvetica,Arial,sans-serif; 
  padding-top: 15px;
}
input,div,label{
  box-sizing: border-box;
}
.material-input{
  position: relative;
  padding: 0;
  margin: 15px 0;
}
.material-input input{
  width: 100%;
  height: 35px;
  line-height: 35px;
  font-size: 18px;
  border: 0 ;
  border-bottom: 2px solid #9e9e9e;
  font-weight: 300;
  color: #000;
  transition: all 0.3s ease-out;
}
.material-input input + label{
  pointer-events: none;
  position: absolute;
  left: 0;
  bottom: 5px;
  transition: all 0.3s ease-out;
  bottom: 35px;
  font-size: 12px;
  color: #9e9e9e;
}
.material-input input[value=""]:not(:focus) + label{
  font-size: 18px !important;
  bottom: 5px !important;
}
.material-input input:focus{
  border-color: #26a69a;
}
.material-input input:focus + label{
  color: #26a69a;
}

JavaScript

var els = document.querySelectorAll('input');
for(var i in els){
	els[i].setAttribute('onkeyup',"this.setAttribute('value', this.value);";)
}