.has-float-label {
    display: block;
    position: relative;
    margin: 0 12px 10px 12px;
}
.has-float-label label, 
.has-float-label > span {
    position: absolute;
    left: 12px;
    top: 5px;
    cursor: text;
    font-size: 12px;
    opacity: 0.8;
    z-index: 100;
    -webkit-transition: all .2s;
    transition: all .2s;
}
.has-float-label select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.has-float-label textarea {
  width: 100%;
}
.has-float-label input, 
.has-float-label select, 
.has-float-label textarea {
    border-radius: 4px;
    border: 2px solid transparent;
    border: solid 1px #d7dcd4;
    font-size: 17px !important;
    outline: 0;
    padding: 23px 0 3px 12px;
    width: 100%;
}

.has-float-label input::-webkit-input-placeholder, 
.has-float-label select::-webkit-input-placeholder, 
.has-float-label textarea::-webkit-input-placeholder {
  opacity: 1;
  -webkit-transition: all .2s;
          transition: all .2s;
}
.has-float-label input::-moz-placeholder, 
.has-float-label select::-moz-placeholder, 
.has-float-label textarea::-moz-placeholder {
  opacity: 1;
  transition: all .2s;
}
.has-float-label input:-ms-input-placeholder, 
.has-float-label select:-ms-input-placeholder, 
.has-float-label textarea:-ms-input-placeholder {
  opacity: 1;
  transition: all .2s;
}
.has-float-label input::placeholder, 
.has-float-label select::placeholder, 
.has-float-label textarea::placeholder {
  opacity: 1;
  -webkit-transition: all .2s;
          transition: all .2s;
}
.has-float-label input:placeholder-shown:not(:focus)::-webkit-input-placeholder, 
.has-float-label select:placeholder-shown:not(:focus)::-webkit-input-placeholder, 
.has-float-label textarea:placeholder-shown:not(:focus)::-webkit-input-placeholder {
  opacity: 0;
}
.has-float-label input:placeholder-shown:not(:focus)::-moz-placeholder, 
.has-float-label select:placeholder-shown:not(:focus)::-moz-placeholder, 
.has-float-label textarea:placeholder-shown:not(:focus)::-moz-placeholder {
  opacity: 0;
}
.has-float-label input:placeholder-shown:not(:focus):-ms-input-placeholder, 
.has-float-label select:placeholder-shown:not(:focus):-ms-input-placeholder, 
.has-float-label textarea:placeholder-shown:not(:focus):-ms-input-placeholder {
  opacity: 0;
}
.has-float-label input:placeholder-shown:not(:focus)::placeholder, 
.has-float-label select:placeholder-shown:not(:focus)::placeholder, 
.has-float-label textarea:placeholder-shown:not(:focus)::placeholder {
  opacity: 0;
}

.has-float-label input:placeholder-shown:not(:focus) + *, 
.has-float-label select:placeholder-shown:not(:focus) + *, 
.has-float-label textarea:placeholder-shown:not(:focus) + * {
  font-size: 133%;
  opacity: .75;
  top: 15px;
  left: 16px;
}
/* force chrome to display labels minimized when input filled by autofill */
.has-float-label input:-webkit-autofill:not(:focus) + * {
    position: absolute;
    left: 12px;
    top: 5px;
    cursor: text;
    font-size: 12px;
    opacity: 0.8;
    z-index: 100;
    -webkit-transition: all .2s;
    transition: all .2s;
}
.has-float-label input:focus, 
.has-float-label select:focus, 
.has-float-label textarea:focus {
    border: solid 1px rgba(0,0,0,.075);
    outline: 0;
    -webkit-box-shadow: inset 0 2px 5px rgba(0,0,0,.015), 0px 0px 1px 1px rgba(89,183,255,1);
    -moz-box-shadow: inset 0 2px 5px rgba(0,0,0,.015), 0px 0px 1px 1px rgba(89,183,255,1);
    box-shadow: inset 0 2px 5px rgba(0,0,0,.015), 0px 0px 1px 1px rgba(89,183,255,1);
}
.has-float-label select {
  padding-right: 1em;
  background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23333' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right 0.5em bottom 0.25em;
  background-size: 8px 10px;
}