Adding Material Design to Your Form Fields Using CSS

#wpforms-form-697 { 

  float: left; 

  width: 100%; 

  text-align: center; 

  margin: 30px auto 30px auto; 

}

#wpforms-form-697 .wpforms-field {

  margin-left: auto;

  margin-right: auto;

  max-width: 300px;

  margin-bottom: 15px;

  position: relative;

}

#wpforms-form-697 .wpforms-field input, 

#wpforms-form-697 .wpforms-field textarea {

  position: relative;

  display: block;

  width: 100%;

  border: none;

  border-bottom: 1px solid #ccc;

  background-color: transparent;

  margin: 0px auto;

  padding: 5px;

  outline: none !important;

  font-size: 14px;

  color: rgba(0,0,0,0.8);

  background: -webkit-linear-gradient(bottom, #51BBBE 50%, #51BBBE 50%);

  background: linear-gradient(to top, #51BBBE 50%, #51BBBE 50%);

  background-position: left bottom;

  background-size: 0 1px;

  background-repeat: no-repeat;

  transition: all .2s ease-in-out;

  max-width: 100%;

}

#wpforms-form-697 .wpforms-field label.wpforms-field-label {

  text-align: left;

  text-transform: uppercase;

  font-size: 13px;

  font-weight: 200;

  background: transparent;

  color: rgba(0,0,0,0.6);

  margin: 0px auto;

  cursor: text;

  transition: all .15s ease-in-out;

}

#wpforms-form-697 .wpforms-field input:focus, 

#wpforms-form-697 .wpforms-field textarea:focus { 

  border-bottom: 1px solid #51BBBE;

  box-shadow: none;

}

#wpforms-form-697 .wpforms-field input:focus,

#wpforms-form-697 .wpforms-field textarea:focus { 

  background-position: left bottom;

  background-size: 100% 1px;

}

#wpforms-form-697 .wpforms-field input:focus + label.wpforms-field-label,

#wpforms-form-697 .wpforms-field textarea:focus + label.wpforms-field-label { 

  color: #51BBBE;

}

.wpforms-field.wpforms-has-error input.wpforms-error, 

.wpforms-field.wpforms-has-error textarea.wpforms-error {

    border-bottom: 1px solid #e57373 !important;

    background-color: transparent;

    background: transparent !important;

}

.wpforms-field.wpforms-has-error label.wpforms-field-label, 

.wpforms-field.wpforms-has-error label.wpforms-error {

    color: #e57373 !important;

}