Material Design Input Text

index.html

<form id="user_login_form" class="ll-form ll-login-form material-design">
  <div id="drupalgap_form_errors"></div>
  <div class="form-item field-name-liveloop-site-path">
    <div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset"><input id="edit-user-login-form-liveloop-site-path" value="" autocapitalize="none" autocorrect="off" required="" class="" type="text"><label for="edit-user-login-form-liveloop-site-path"><strong>Community</strong><span class="required-marker">*</span></label>
      <span class="bar"></span>
    </div>
  </div>
  <div class="form-item field-name-name">
    <div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset"><input id="edit-user-login-form-name" value="" autocapitalize="none" required="true" class="" type="text"><label for="edit-user-login-form-name"><strong>e-mail</strong><span class="required-marker">*</span></label><span class="bar"></span></div>
  </div>
  <div class="form-item field-name-pass">
    <div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset"><input id="edit-user-login-form-pass" value="" onkeypress="drupalgap_form_onkeypress('user_login_form')" required="true" class="" type="password"><label for="edit-user-login-form-pass"><strong>Password</strong><span class="required-marker">*</span></label>
      <span
        class="bar"></span>
    </div>
  </div>
  <div class="form-item field-name-submit"><button id="edit-user-login-form-submit" value="Login" onclick="_drupalgap_form_submit('user_login_form');" data-theme="b" type="button" class=" dg_form_submit_button  ui-btn ui-btn-b ui-shadow ui-corner-all">Login</button></div>
</form>

<form class="material">
  <input placeholder="Username" type="text" required="">
  <input placeholder="Password" type="password" required="">
  <button>Submit</button>
</form>

material-design-input-text.markdown

Material Design Input Text

A Pen by Stéphane on CodePen.

License.

style.css

body {
  background: #39444c;
}

form.material input::-webkit-input-placeholder, form.material button {
  font-family: 'roboto', sans-serif;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}


form.material {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 260px;
  margin: 0px auto 0;
  padding-bottom: 40px;
  _padding-top: 5px;
}

form.material input {
  margin: 40px 0px;
  padding: 0 10px;
  width: 100%;
  display: block;
  border: none;
  padding: 10px 0;
  border-bottom: solid 1px white;
  -webkit-transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
  transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(96%, rgba(255, 255, 255, 0)), color-stop(4%, #1abc9c));
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 96%, white 4%);
  background-position: -300px 0;
  background-size: 300px 100%;
  background-repeat: no-repeat;
  color: #0e6252;
  color: white;
}

form.material input:focus {
  -webkit-box-shadow: none;
          box-shadow: none;
  outline: none;
  background-position: 0 0;
}

form.material input:valid {
  -webkit-box-shadow: none;
          box-shadow: none;
  outline: none;
}



form.material input:focus::-webkit-input-placeholder, 
form.material input:valid::-webkit-input-placeholder {
  color: #1abc9c;
  color: white;
  font-size: 11px;
  -webkit-transform: translateY(-20px);
          transform: translateY(-20px);
  visibility: visible !important;
}

_.form-item {
  position: relative;
}


_input:focus ~ label, 
_input:valid ~ label 		{
  top:-20px;
  font-size:14px;
  color:#5264AE;
  _display: none;
}

_.form-item:focus-within > label {
  -webkit-transform: translateY(-20px);
          transform: translateY(-20px);
  bottom: 30px;
  color: white;
}

/* ================================= */


form.material-design {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 270px;
  margin: 0px auto 0;
}


form.material-design input {
  margin: 40px 0px;
  width: 100%;
  width: 260px;
  display: block;
  border: none;
  padding: 10px 5px;
  border-bottom: solid 1px white;
  -webkit-transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
  transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
  background: none;
  color: white;
}

form.material-design input:focus {
  -webkit-box-shadow: none;
          box-shadow: none;
  outline: none;
}

form.material-design input:valid {
  -webkit-box-shadow: none;
          box-shadow: none;
  outline: none;
}

form.material-design .form-item {
  position: relative;
}

form.material-design label {
  padding: 0 5px;
  color: white; 
  color: #a9a9a9;
  font-size:11px;
  font-weight:normal;
  position:absolute;
  pointer-events:none;
  bottom: 10px;
  transition:0.3s ease all; 
  -moz-transition:0.3s ease all; 
  -webkit-transition:0.3s ease all;
   -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

 
form.material-design input:focus + label,
form.material-design input:valid + label {
  font-size: 11px;
  -webkit-transform: translateY(-25px);
          transform: translateY(-25px);
  visibility: visible !important;
}

form.material-design input:valid + label { 
  color: white;
}

form.material-design input:focus + label {
  color: #1ca6d3;
  
}


form.material-design .required-marker {
  display: none;
}

/* BOTTOM BARS ================================= */
form.material-design .bar:before, 
form.material-design .bar:after 	{
  content:'';
  height:2px; 
  width:0;
  bottom:0px; 
  position:absolute;
  background:#1ca6d3; 
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}
form.material-design .bar:before {
  left:50%;
}
form.material-design .bar:after {
  right:50%;
}

/* active state */
form.material-design input:focus ~ .bar:before, 
form.material-design input:focus ~ .bar:after {
  width:50%;
}